web-dev-qa-db-fra.com

Pourquoi l'accès à $ rootScope n'est-il pas possible dans le modèle d'une directive avec une portée d'isolement?

Avec isolate scope, le modèle de la directive ne semble pas pouvoir accéder à la variable $ rootScope du contrôleur ('Ctrl') qui, toutefois, apparaît dans le contrôleur de la directive. Je comprends pourquoi la variable $ scope du contrôleur ('Ctrl') n'est pas visible dans la portée isolate.

HTML:

<div ng-app="app">
    <div ng-controller="Ctrl">
        <my-template></my-template>
    </div>

    <script type="text/ng-template" id="my-template.html">
        <label ng-click="test(blah)">Click</label>
    </script>
</div>

JavaScript:

angular.module('app', [])
    .controller('Ctrl', function Ctrl1($scope,  $rootScope) {
        $rootScope.blah = 'Hello';
        $scope.yah = 'World'
    })
    .directive('myTemplate', function() {
        return {
            restrict: 'E',
            templateUrl: 'my-template.html',
            scope: {},
            controller: ["$scope", "$rootScope", function($scope, $rootScope) {
                console.log($rootScope.blah);
                console.log($scope.yah);,

                $scope.test = function(arg) {
                    console.log(arg);
                }
            }]
        };
    });

JSFiddle

On accède à la variable sans portée isolée - comme on peut le voir en commentant la ligne de portée isolée:

        // scope: {},
javascriptangularjsangularjs-directive
79
camden_kid

Vous pouvez essayer cette méthode en utilisant $root.blah

Code de travail

html 

 <label ng-click="test($root.blah)">Click</label>

javascript 

  angular.module('app', [])
    .controller('Ctrl', function Ctrl1($scope,  $rootScope) {
        $rootScope.blah = 'Hello';
        $scope.yah = 'World'
    })
    .directive('myTemplate', function() {
        return {
            restrict: 'E',
            templateUrl: 'my-template.html',
            scope: {},
            controller: ["$scope", "$rootScope", function($scope, $rootScope) {
                console.log($rootScope.blah);
                console.log($scope.yah);

                $scope.test = function(arg) {
                    console.log(arg);
                }
            }]
        };
    });
159
Nidhish Krishnan

En règle générale, vous devez éviter d'utiliser $rootScope pour stocker les valeurs que vous devez partager entre les contrôleurs et les directives. C'est comme utiliser des globals dans JS. Utilisez un service à la place:

Une constante (ou valeur ... utilisation est similaire): 

.constant('blah', 'blah')

https://docs.angularjs.org/api/ng/type/angular.Module

Une usine (ou service ou fournisseur): 

.factory('BlahFactory', function() {
    var blah = {
        value: 'blah'
    };

    blah.setValue = function(val) {
      this.value = val;
    };

    blah.getValue = function() {
        return this.value;
    };

    return blah;
})

Voici un branche de votre violon montrant comment vous pouvez utiliser soit

32
Marc Kline

1) En raison de la portée isolée $scope dans votre contrôleur, Ctrl et dans le contrôleur de directive ne font pas référence à la même portée - disons que nous avons scope1 dans Ctrl et scope2 dans directive.

2) En raison de la portée isolée de la portée2 ne le fait pas, hériter prototypiquement de $rootScope; donc si vous définissez $rootScope.blah il n'y a aucune chance de le voir dans scope2 .

3) Ce à quoi vous pouvez accéder dans votre modèle de directive est scope2

Si je résume, voici le schéma d'héritage

    _______|______
    |            |
    V            V
$rootScope     scope2
    |
    V
  scope1


$rootScope.blah
> "Hello"
scope1.blah
> "Hello"
scope2.blah
> undefined
23
Thomas Guillory