在 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;

  }
 ]);

正在尝试打印根范围

If I run this Code i am facing the error of $rootScope is undefined in the console. How to Resolve this

Answer 1

这里有一个对您的问题有用的答案：

不是直接在 $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 2

请确保您采纳 georgeawg 的建议，在我看来，他的建议似乎是实现此功能的最佳方式。

我想提出您的示例可能存在的问题。

如果你能在主 App.main.js 中看到你已将声明作为

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

但是你在 login.js 中使用变量 app 就像这样。

app.controller(...

我假设您是在其他地方创建的。因此设置 rootscope 值丢失，因为同一个应用程序有两个实例。

您的问题的解决方案是声明一个变量 app 来存储应用程序的实例。因此，您的解决方案的解决方法是将 App.main.js 修改为这样。

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

app.controller(...

您还需要删除完整代码中的任何其他任意项 var app =，因为它们会创建同一应用的多个实例。

我希望我的解释是可以理解的并且是正确的猜测，请尝试这个解决方案！

Answer 3

在你的主 js 中添加这个。

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

Answer 4

这是乔治建议的示例实现，这是处理此问题的正确方法。

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;
}

Answer 5

$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;
});

在 angularJS 中使用 rootscope 将值从一页传递到另一页

pass the value from one page to another using rootscope in angularJS

angularjs

angular-ui-router

rootscope