angularjs - ¿Cómo uso $ rootScope en Angular para almacenar variables?

rootscope angularjs

Question

¿Cómo uso $rootScope para almacenar variables en un controlador al que quiero acceder más tarde en otro controlador? Por ejemplo:

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

¿Cómo haría esto?

Answer 1

Compartir datos entre controladores es para lo que Fábricas / Servicios son muy buenos. En resumen, funciona algo como esto.

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

Puede ver un ejemplo de trabajo en este violín: http://jsfiddle.net/mbielski/m8saa/

Answer 2

Hay múltiples maneras de lograr esto:

1. Agrega $rootScope en el 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. Cree un servicio y acceda a él en ambos 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);
})

Answer 3

Las variables establecidas en el ámbito raíz están disponibles para el controlador a través de la herencia prototípica.

Aquí hay una versión modificada de la demostración de @Nitish que muestra la relación un poco más clara: http://jsfiddle.net/TmPk5/6/

Observe que la variable rootScope se establece cuando el módulo se inicializa, y luego cada uno de los alcances heredados obtiene su propia copia que se puede configurar de forma independiente (la función de change ). Además, el valor del rootScope también se puede actualizar (la función myCtrl2 en 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 4

No encuentro ninguna razón para hacer esto $ scope.value = $ rootScope.test;

$ scope ya es herencia de prototipo de $ rootScope.

Por favor vea este ejemplo.

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

Ahora puede enlazar esta variable de alcance en cualquier lugar en la etiqueta de la aplicación.

Answer 5

Si solo se trata de "acceso en otro controlador", entonces puede usar constantes angulares para eso, el beneficio es; puede agregar algunas configuraciones globales u otras cosas a las que desea acceder a través de la aplicación

app.constant(‘appGlobals’, {
    defaultTemplatePath: ''/assets/html/template/'',
    appName: ''My Awesome App''
});

y luego acceder a ella como:

app.controller(‘SomeController’, [‘appGlobals’, function SomeController(config) {
    console.log(appGlobals);
    console.log(‘default path’, appGlobals.defaultTemplatePath);
}]);

(no prueba)

más información: http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/

Answer 6

primero almacena los valores en $ 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 es el padre de todos los $ scope, cada $ scope recibe una copia de los datos de $ rootScope a los que puede acceder utilizando $ scope.

Answer 7

http://astutejs.blogspot.in/2015/07/angularjs-what-is-rootscope.html

 app.controller(''AppCtrl2'', function ($scope, $rootScope) {
     $scope.msg = ''SCOPE'';
     $rootScope.name = ''ROOT SCOPE'';
 });

Answer 8

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