Angularjs - $rootScope dans la directive fonction de lien

À partir de mes expériences, \ l'expérience, il semble que, puisque tous les $étendues finalement hériter de l' $rootScope vous serez en mesure d'accéder à des données sans demander comme un service, suivant la norme javascript prototype de règles d'héritage. Si vous définissez le champ d'application de la propriété dans votre directive faux ou {}, vous trouverez que vous ne pouvez plus y accéder.

.directive("myBar", function($rootScope) {
    return {
        restrict: "E",
        scope: { /* Isolate scope, no $rootScope access anymore */ },
        transclude: true,
        replace: true,
        template: '<div>' + 
                  '<span ng-transclude></span>' + 
                  '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
                  '</div>'
    };
});

Exemple: http://jsbin.com/bequy/1/edit

Il est recommandé de ne pas utiliser la racine de la portée pour définir et obtenir les propriétés de votre angulaire de l'application. Essayez d'utiliser le $cacheFactory, car de cette façon, vous pouvez également mettre en cache certaines valeurs sur diverses demandes. ($cacheFactory docs)

En travaillant loin sur cette même question depuis quelques temps, j'ai pensé qu'il était intéressant de noter quelque chose qui a été négligé dans le premier post. Voici mon code d'origine:

app.directive('countrymap', function() 
{
    return {
        link: function(scope, element, attrs) {
            scope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                {
                    //function body here    
                }, 100);
            })
        }
    };  
}]);

À côté de la plus philosophique de la conception à la question de savoir si ou pas, vous devriez utiliser $rootScope à tous, il y a une flagrante mauvaise chose avec mon code ci-dessus que je me sens a été laissé de côté de Mike solution - la référence à $rootScope. Si vous êtes comme moi et que vous avez distincts de votre directive et contrôleur de fichiers, vous aurez besoin de modifier votre code comme suit:

app.directive('countrymap', ['$rootScope', function($rootScope) 
{
    return {
        link: function(scope, element, attrs) {
            $rootScope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                { 
                    //function body here
                }, 100);
            })
        }
    };  
}]);

Pourtant, il est encore plus lancinante question: puis-je accomplir le même but sans référencement $rootScope dans la directive? En effet vous pouvez. Vous avez besoin de diffuser de la modification de l' $rootScope propriété de manière efficace permettant à tous les enfants des étendues de savoir le changement et l'observation de ce changement dans la directive.

Contrôleur:

$rootScope.countryMap = 'thiscountry_map';
$rootScope.$broadcast( "countryMapChanged", $rootScope.countryMap );

Directive:

app.directive('countrymapalt', [function() 
{
    return {
        link: function(scope, element, attrs) {
            scope.$on("countryMapChanged", function(event, map) 
            {
                setTimeout( function() 
                { 
                    //function body here
                }, 100);
            })
        }
    };  
}]);