Как использовать $rootScope в Angular для хранения переменных?
Как использовать $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
});
Как бы я это сделал?
8 ответов
переменные, установленные в корневой области, доступны области контроллера через прототипическое наследование.
вот модифицированная версия демо @Nitish, которая показывает отношения немного яснее: http://jsfiddle.net/TmPk5/6/
обратите внимание, что переменная rootScope устанавливается при инициализации модуля, а затем каждая из унаследованных областей получает свою собственную копию, которая может быть установлена независимо (
обмен данными между контроллерами-это то, для чего фабрики/службы очень хороши. Короче говоря, это работает примерно так.
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/
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);
});
Я не нахожу причин делать это $scope.значение метрики.тест;
$scope уже является прототипом наследования от $rootScope.
пожалуйста, смотрите этот пример
var app = angular.module('app',[]).run(function($rootScope){
$rootScope.userName = "Rezaul Hasan";
});
теперь вы можете привязать эту переменную области в любом месте тега приложения.
сначала сохраните значения в $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.
Если это просто "доступ в другом контроллере", то вы можете использовать угловые константы для этого, преимущество; вы можете добавить некоторые глобальные настройки или другие вещи, к которым вы хотите получить доступ во всем приложении
app.constant(‘appGlobals’, {
defaultTemplatePath: '/assets/html/template/',
appName: 'My Awesome App'
});
а затем получить к нему доступ, как:
app.controller(‘SomeController’, [‘appGlobals’, function SomeController(config) {
console.log(appGlobals);
console.log(‘default path’, appGlobals.defaultTemplatePath);
}]);
(не тест)
дополнительная информация: http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/
http://astutejs.blogspot.in/2015/07/angularjs-what-is-rootscope.html
app.controller('AppCtrl2', function ($scope, $rootScope) {
$scope.msg = 'SCOPE';
$rootScope.name = 'ROOT SCOPE';
});
существует несколько способов достичь этого: -
1. добавить $rootScope
на .run
метод
.run(function ($rootScope) {
$rootScope.name = "Peter";
});
// Controller
.controller('myController', function ($scope,$rootScope) {
console.log("Name in rootscope ",$rootScope.name);
OR
console.log("Name in scope ",$scope.name);
});
2. создайте одну службу и получите к ней доступ в обоих контроллерах.
.factory('myFactory', function () {
var object = {};
object.users = ['John', 'James', 'Jake'];
return object;
})
// Controller A
.controller('ControllerA', function (myFactory) {
console.log("In controller A ", myFactory);
})
// Controller B
.controller('ControllerB', function (myFactory) {
console.log("In controller B ", myFactory);
})