Como eu uso $rootScope
para armazenar variables em um controlador que eu quero acessar posteriormente em outro controlador? Por exemplo:
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 });
Como eu faria isso?
As variables definidas no escopo raiz estão disponíveis para o escopo do controlador por meio de inheritance prototípica.
Aqui está uma versão modificada da demo do @Nitish que mostra o relacionamento um pouco mais claro: http://jsfiddle.net/TmPk5/6/
Observe que a variável do rootScope é definida quando o módulo é inicializado e, em seguida, cada um dos escopos herdados obtém sua própria cópia, que pode ser definida independentemente (a function de change
). Além disso, o valor do rootScope também pode ser atualizado (a function myCtrl2
em 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; }; });
Compartilhar dados entre controladores é o que Fábricas / Serviços são muito bons. Em suma, funciona algo assim.
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; }
Você pode ver um exemplo de trabalho neste violino: 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); });
DEMO
Eu não acho nenhuma razão para fazer isso $ scope.value = $ rootScope.test;
$ scope já é uma inheritance de protótipo de $ rootScope.
Por favor veja este exemplo
var app = angular.module('app',[]).run(function($rootScope){ $rootScope.userName = "Rezaul Hasan"; });
Agora você pode vincular essa variável de escopo em qualquer lugar na tag do aplicativo.
primeiro armazene os valores em $ rootScope como
.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 é o pai de todo o $ escopo, cada $ escopo recebe uma cópia dos dados do $ rootScope que você pode acessar usando o próprio escopo do $.
Se é apenas “access em outro controlador”, então você pode usar constantes angulares para isso, o benefício é; você pode adicionar algumas configurações globais ou outras coisas que você deseja acessar em todo o aplicativo
app.constant('appGlobals', { defaultTemplatePath: '/assets/html/template/', appName: 'My Awesome App' });
e depois acessá-lo como:
app.controller('SomeController', ['appGlobals', function SomeController(config) { console.log(appGlobals); console.log('default path', appGlobals.defaultTemplatePath); }]);
(não testou)
mais informações: 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'; });
Existem várias maneiras de conseguir isso:
1. Adicione $rootScope
no método .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. Crie um serviço e acesse-o nos dois controladores.
.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); })