如何在Angular中使用$ rootScope来存储变量？

Question

如何使用$rootScope我想稍后在另一个控制器中访问的控制器中存储变量？例如:

angular.module('myApp').controller('myCtrl', function($scope) {
  var a = //something in the scope
  //put it in the root scope
});

angular.module('myApp').controller('myCtrl2', function($scope) {
  var b = //get var a from root scope somehow
  //use var b
});

我该怎么做？

Answer 1

通过原型继承,控制器范围可以使用在根范围设置的变量.

这是@ Nitish演示的修改版本,它显示了更清晰的关系:http: //jsfiddle.net/TmPk5/6/

请注意,在模块初始化时设置rootScope的变量,然后每个继承的范围都获得可以独立设置的自己的副本(change函数).此外,rootScope的值也可以更新(changeRs函数myCtrl2)

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
  $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
})
.controller('myCtrl2', function($scope, $rootScope) {
    $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.changeRs = function() {
        $rootScope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
});

Answer 2

在控制器之间共享数据是工厂/服务非常有用的.简而言之,它的工作原理是这样的.

var app = angular.module('myApp', []);

app.factory('items', function() {
    var items = [];
    var itemsService = {};

    itemsService.add = function(item) {
        items.push(item);
    };
    itemsService.list = function() {
        return items;
    };

    return itemsService;
});

function Ctrl1($scope,items) {
    $scope.list = items.list; 
}

function Ctrl2($scope, items) {
    $scope.add = items.add;
}

你可以在这个小提琴中看到一个有效的例子:http://jsfiddle.net/mbielski/m8saa/

Answer 3

angular.module('myApp').controller('myCtrl', function($scope, $rootScope) {
   var a = //something in the scope
   //put it in the root scope
    $rootScope.test = "TEST";
 });

angular.module('myApp').controller('myCtrl2', function($scope, $rootScope) {
   var b = //get var a from root scope somehow
   //use var b

   $scope.value = $rootScope.test;
   alert($scope.value);

 //    var b = $rootScope.test;
 //  alert(b);
 });

DEMO

Answer 4

我没有理由这样做$ scope.value = $ rootScope.test;

$ scope已经是$ rootScope的原型继承.

请看这个例子

var app = angular.module('app',[]).run(function($rootScope){
$rootScope.userName = "Rezaul Hasan";
});

现在,您可以将此范围变量绑定到app标记中的任何位置.

Answer 5

首先将$ rootScope中的值存储为

.run(function($rootScope){
$rootScope.myData = {name : "nikhil"}
})

.controller('myCtrl', function($scope) {
var a ="Nikhilesh";
$scope.myData.name = a;
});

.controller('myCtrl2', function($scope) {
var b = $scope.myData.name;
)}

$ rootScope是所有$ scope的父级,每个$ scope都会收到$ rootScope数据的副本,您可以使用$ scope本身访问这些数据.