AngularJS - $ rootScope in Richtlinie Link-Funktion

Question

ich diese Frage bin frage, weil ich nicht ganz klar bin, wie von rootscope als Abhängigkeit Richtlinien bestanden

Ich habe eine Richtlinie zu denken, dass einige Informationen von $ angezeigt werden muss rootScope ...

Ich dachte, ich müsste das $ rootScope an eine Direktive übergeben, aber wenn ich eine Direktive schreibe, scheint es zu funktionieren.

.directive("myBar", function() { 
return { 
    restrict: "E", 
    transclude: true, 
    replace: true, 
    template: '<div>' + 
       '<span ng-transclude></span>' + 
       '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
       '</div>' 
} 
}) 

Wann muss ich dies tun müssen?

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

Kann ich und wie verwende ich rootScope, wenn ich es in der Link-Funktion der Richtlinie müssen - oder soll ich tun es in der Steuerung der Richtlinie?

.directive("myBar", function ($rootScope) { 
return { 
    restrict: "E", 
    transclude: true, 
    replace: true, 
    link: function (scope, element, attrs, rootScope) { 
     rootScope.rsUser = { firstName: 'Joe' }; 
     rootScope.rsUser = { welcome: 'Welcome' }; 
    }, 
    template: '<div>' + 
       '<span ng-transclude></span>' + 
       '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
       '</div>' 
} 
}) 

Meine rootScope Daten in Lauffunktion

.run(function ($rootScope) { 

    $rootScope.rsLabels = { 
     welcome: 'Welcome' 
    }; 

    $rootScope.rsUser = { 
    firstName: 'Joe' 
    }; 
}); 

Danke definiert ist!

Answer 1

Von meinen experiments \ experience, scheint es, dass, da alle $ scopes letztlich von $ rootScope erben, Sie auf Daten darauf zugreifen können, ohne es als einen Dienst zu fordern, gemäß Standard-JavaScript-prototypischen Vererbungsregeln. Wenn Sie die Eigenschaft scope in Ihrer Anweisung auf false oder {} setzen, werden Sie feststellen, dass Sie nicht mehr darauf zugreifen können.

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

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

Answer 2

Es wird nicht empfohlen, den Stammbereich zum Festlegen und Abrufen von Eigenschaften in Ihrer eckigen Anwendung zu verwenden. Versuchen Sie, die $ cacheFactory zu verwenden, da Sie auf diese Weise auch einige Werte über verschiedene Anfragen zwischenspeichern können. ($cacheFactory docs)

Answer 3

Sie auf diese Weise tun können:

{{$root.rsLabels.welcome}} 

Answer 4

Nach arbeitend weg auf dieser gleichen Frage schon seit geraumer Zeit, ich dachte, es wert war etwas Feststellung, dass in vernachlässigt wurde der erste Beitrag. Hier ist mein Original-Code ist:

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

Abgesehen von der eher philosophischen Design Frage, ob oder nicht, sollten Sie sogar $ rootScope verwenden überhaupt, gibt es eine offensichtlich falsche Sache mit meinem Code oben, dass ich links das Gefühl aus Mikes Lösung - die Referenz zu $ ​​rootScope. Wenn Sie wie ich sind und haben Ihre Richtlinie und Controller Dateien getrennt müssen Sie Ihren Code wie folgt ändern:

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

Dennoch gibt noch eine weitere quälende Frage ist: Kann ich das gleiche Ziel ohne erreichen referenzieren $ rootScope in der Direktive? In der Tat kannst du. Sie müssen die Änderung an die $ rootScope-Eigenschaft übertragen, damit alle untergeordneten Bereiche die Änderung kennen und auf diese Änderung in der Anweisung achten können.

Controller:

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

Richtlinie:

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

Answer 5

Eine andere Möglichkeit ist es, einen Dienst zu erstellen und diesen Dienst Zugriff auf die $ rootScope und andere Funktionen werfen. Ich habe es so wegen meiner Umgebung ...

app.service('myService', function ($rootScope) 
{ 
    this.removeItem = function (el) 
    { 
     console.log('rootScope: ',$rootScope); 
     return true; 
    } 
}); 


app.directive('draggable', function($document,myService) 
{ 
    return function(scope, element, attr) 
    { 
     myService.removeItem({id:1}) 
    } 
}); 

Wenn Sie können, der beste Weg ist, Mike Lösung. Wenn nicht, versuche meine Lösung.

Answer 6

Manchmal muss ich $ Bereich verwenden $ root.

app.directive('setOrdinal', function() { 
    return { 
    link: function($scope, $element, $attr) { 

     var steps = $scope.$root.steps; 

     $scope.$watch(setOrdinal, function(value) { 
     if (value) 
     { 
      // steps code here 
     } 
     }); 
    } 
    }; 
}); 

app.controller('stepController', ['$scope', '$rootScope', 'GetSteps', function ($scope, $rootScope, GetSteps) { 
    var s = $scope; 
    var r = $rootScope; 

    s.initialize = function(id) 
    { 
    GetSteps.get({id: id}, function(resp){ 
     r.steps = resp.steps; 
    }); 
    }; 
}]);