如何使用angular js將數據從一頁傳遞到另一頁？

Question

如果用戶有效，我在這里嘗試使用用戶憑證登錄，我想使用angular js將UserName，LastloginTime，Role值傳遞給另一個頁面

<form role="form" ng-app="MyApp" ng-controller="MasterController">
        <div class="form-group">
            <label>
                Username</label>

            <input type="text" class="form-control" placeholder="Username" required ng-model="username" />
        </div>
        <div class="form-group">
            <label>
                Password</label>
            <input type="password" class="form-control" placeholder="Password" required ng-model="password" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="remember">
                Remember my Password
            </label>
        </div>
        <input type="button" value="Submit" ng-click="GetData()" class="btn btn-danger" />
        <%--<button type="button" class="btn btn-danger" ng-click="GetData()">Submit</button>--%>
        <span ng-bind="Message"></span>
    </form>

js文件在這里

   $scope.GetData = function () {
        debugger;
        var data = { UserName: $scope.username, Password: $scope.password };
        $http.post("api/Test/CheckUsername", data)
       .success(function (data, status, headers, config) {
           if (data != "") {
               $scope.Employees = data;
               window.location.href = "EmployeeMaster";
               //$scope.Reporting = data;
           }
           else {
               alert("Invalid Credientials");
           }

       });
    }

我想在母版頁中顯示值

                        <table class="table">
                            <tr ng-repeat="Emp in Employees">
                                <th>User </th>
                                <td>:</td>
                                <td>{{Emp.username}}</td>
                            </tr>
                            <tr>
                                <th>Designation </th>
                                <td>:</td>
                                <td>{{Emp.RoleName}}</td>
                            </tr>
                            <tr>
                                <th>Last Login </th>
                                <td>:</td>
                                <td>{{Emp.LastLogin}}</td>
                            </tr>
                        </table>

如何將值登錄頁面傳遞到主頁？

Answer 1

我建議創建一個服務來存儲您的全局數據：

myApp.factory('DataService', function() {
    var user = {
        name: '',
        role: ''
        // and so on
    };

    return {
        user: user
    };
});

只需將其注入所有控制器並設置和檢索所需的數據即可：

myApp.controller('MyCtrl', function($scope, DataService) {
    // make your DataService available in your scope
    $scope.DataService = DataService;
});

這使您可以將模型全局綁定到DataService 。

Answer 2

查看AngularJS的正確存儲。 它非常適合存儲用戶信息/令牌/任何對象。

主要特征

默認情況下使用localStorage或sessionStorage，但如果不可用，則使用ngCookies。 讓您保存JS對象如果保存一個數字，則得到一個數字，而不是字符串。使用緩存系統，這樣，如果您已經有一個值，它將不再從存儲中獲取它。

https://github.com/auth0/angular-storage

Answer 3

有很多方法可以實現這一目標

1）使用$ rootscope就像使用$ scope一樣

$rootscope.userName = "" 

將$ rootscope依賴項注入到要顯示它的控制器中，並創建一個對象名稱Employee並用$ rootscope填充它。

2）使用常量之類的

module.constant("userData", data);

將userData依賴項注入到要顯示它的控制器中，並創建一個對象名稱Employee並用userData填充它。

3）您可以使用服務/工廠並將數據保存在本地存儲/會話存儲中

Answer 4

要在頁面之間傳輸數據，可以在路由文件中使用stateParams：：

 $stateProvider
  .state('employeeMasterState', {
    url: '/employeeMasterUrl/:employeeData',
    templateUrl: 'info/employeeMaster.tpl.html',
    controller: 'employeeMasterCtrl',
    controllerAs: 'employeeMasterCtrlAs'
  });

js：

$scope.GetData = function () {
    debugger;
    var data = { UserName: $scope.username, Password: $scope.password };
    $http.post("api/Test/CheckUsername", data)
   .success(function (data, status, headers, config) {
       if (data != "") {
           this.state.go('employeeMasterState',{employeeData:data}); 

       }
       else {
           alert("Invalid Credientials");
       }

   });
}

在下一頁js中：

constructor($scope, $statePArams){
  $scope.empData = $stateParams.data;
}

Answer 5

您可以創建服務或工廠以在網頁之間共享數據。 這是文檔