web-dev-qa-db-fra.com

Comment utiliser $ rootScope dans Angular pour stocker des variables?

Comment utiliser $rootScope pour stocker les variables dans un contrôleur auquel je souhaite accéder ultérieurement dans un autre contrôleur? Par exemple:

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

Comment je ferais ça?

angularjsangularjs-scopeangularjs-controllerrootscope
215
trysis

Les variables définies au niveau de la portée racine sont disponibles pour la portée du contrôleur via l'héritage prototype.

Voici une version modifiée de la démo de @ Nitish qui montre la relation un peu plus claire: http://jsfiddle.net/TmPk5/6/

Notez que la variable de rootScope est définie lors de l'initialisation du module, puis que chaque portée héritée reçoit sa propre copie qui peut être définie indépendamment (fonction change). De plus, la valeur de rootScope peut également être mise à jour (la fonction changeRs dans 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;
    };
});
247
Jason

Le partage de données entre contrôleurs est ce à quoi servent les usines/services. En bref, cela fonctionne à peu près comme ça.

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

Vous pouvez voir un exemple de travail dans ce violon: http://jsfiddle.net/mbielski/m8saa/

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

DÉMO

21
Nitish Kumar

je ne trouve aucune raison de faire cela $ scope.value = $ rootScope.test;

$ scope est déjà un prototype d'héritage de $ rootScope.

S'il vous plaît voir cet exemple

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

maintenant, vous pouvez lier cette variable de portée n'importe où dans la balise app.

9
roconmachine

commencez par stocker les valeurs dans $ rootScope en tant que

.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 est le parent de toutes les $ scope, chaque $ scope reçoit une copie des données $ rootScope auxquelles vous pouvez accéder en utilisant $ scope lui-même.

6
Nikhilesh Yadav

S'il ne s'agit que d'un "accès dans un autre contrôleur", vous pouvez utiliser les constantes angular, l'avantage est que; vous pouvez ajouter des paramètres globaux ou d'autres éléments auxquels vous souhaitez accéder tout au long de l'application

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

puis accédez-y comme:

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

(n'a pas testé)

plus d'infos: http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/

3
Raza Ahmed

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

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

Il y a plusieurs façons de réaliser celui-ci: -

1. Ajouter $rootScope dans la méthode .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. Créez un service et accédez-y dans les deux contrôleurs.

.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);
})
1
ojus kulkarni