在angularJS中使用rootscope將值從一頁傳遞到另一頁

Question

Login.js：

app.controller('LoginFormController', ['$scope','$http','$rootScope', '$state', function($scope, $http, $rootScope, $state) {
    $scope.user = {};
    $scope.authError = null;
    $scope.login = function() {
      $scope.authError = null;

      var emailId = $scope.user.email;
      var password = $scope.user.password;
      $http({
        url: 'http://localhost:8090/login/login',
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'

        },
        data: 'email='+emailId+'&password='+password
        //data: {'email': $scope.user.email, 'password': $scope.user.password}
      }).then(function(response) {
        console.log(response.data);


        if (response.data.status == 'SUCCESS') {

          $scope.user = response.data.user.firstName;
          $rootScope.test = response.data.user.firstName;
          console.log("check: ",$rootScope.test)
          $state.go('app.dashboard');
        } else {
          //alert('invalid login');
          $scope.authError = 'Email or Password not right';
        }
      }, function(x) {
        $scope.authError = 'Server Error';
      })
    };
}])

我將值保存在$ rootScope.test下

這是我的App.main.js：

'use strict';
  angular.module('app').controller('AppCtrl', ['$scope','$rootScope',
   function($scope, $rootScope) {

    $scope.user5 = $rootScope.test;

  }
 ]);

試圖打印rootscope

如果我運行此代碼，則會遇到$ rootScope錯誤在控制台中未定義。 如何解決這個問題

Answer 1

$ rootScope是所有$ scope的父級，每個$ scope都會收到$ rootScope數據的副本，您可以使用$ scope本身進行訪問。

這是修改后的版本https://jsfiddle.net/sedhal/g08uecv5/17/

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.obj = {
      "name":"user1",
      "bdate":"18/11/1994",
      "city":"Ahmedabad"
    };
})
.controller('myCtrl', function($scope, $rootScope) {
      $scope.data = $rootScope.obj;
})
.controller('myCtrl2', function($scope, $rootScope) {
     $scope.data1 = $rootScope.obj;
});

Answer 2

這里有一個有用的答案對您的問題： https : //stackoverflow.com/a/18881189/9013688

不必直接在$ rootScope上傳遞屬性，您可以發出一個事件，該事件可以在應用程序的其他部分中監聽，如下所示：

if (response.data.status == 'SUCCESS') {
  $rootScope.$emit('user-logged', response.data.user.firstName)
}

接着：

$rootScope.$on('user-logged', function(event, data){ do something with your data })

或者，您可以使用一種服務來處理所有應用程序中的數據的好方法。

Answer 3

請確保您聽取了georgeawg的建議，我認為他的建議似乎是實現此功能的最佳方法。

我想建議您的示例出什么問題。

如果您在主App.main.js看到它，則將聲明指定為

angular.module('app').controller(...

但是您正在像這樣在login.js中使用變量app 。

app.controller(...

我假設您正在其他地方創建。 因此，設置的rootscope值會丟失，因為同一應用程序有兩個實例。

---

您的問題的解決方案是聲明一個變量app ，該app將存儲該應用的實例。 因此，解決方案的解決方案是將App.main.js修改為這樣。

var app = angular.module('app');

app.controller(...

另外，您還需要在完整的代碼中刪除其他任意變量var app = ，因為它們將創建同一應用程序的多個實例。

希望我的解釋是可以理解的，並且是正確的猜測，請嘗試使用此解決方案！

Answer 4

在您的主要js中添加此代碼。

app.run(['$rootScope', function($rootScope) {
  $rootScope.test; 
}]);

Answer 5

這是喬治建議的示例實現，這是處理此問題的正確方法。

app.controller('LoginFormController', ['$scope','$http','$rootScope', '$state', 'stateService', function($scope, $http, $rootScope, $state, stateService) {
    var userFirstName = 'John';
    stateService.setFirstName('Bill');

    userFirstName = stateService.getFirstName(); 
    console.log(userFirstName); // result will be 'Bill'
}])

還有我通常稱為stateService的服務

app.factory('stateService', [factory]);

function factory() {        
    var userFirstName = null;

    stateService.getFirstName = function() {
        return userFirstName;
    };

    stateService.setFirstName = function(firstName) {
        userFirstName = firstName;
    };

    return stateService;
}