Wie kann ich auf deren Geltungsbereich zugreifen, wenn ich von einer Direktive umhüllt bin?

Question

Wie kann ich im Hauptteil der Richtlinie auf den isolierten Geltungsbereich der Richtlinie zugreifen?Mein DOM sieht so aus:

<div ng-app="app">    
    <directive>
        <p>boolProperty: {{boolProperty|json}}</p>
    </directive>
</div>

Der boolProperty wird innerhalb der Direktive zugewiesen link Funktion:

angular.module("app", []).directive("directive", function() {
    return {
        scope: {},
        link: function($scope) {
            $scope.boolProperty = true;
        }
    };
});

Das Problem ist das Kind <p> innerhalb der Direktive bindet an die Direktive Elternteil Geltungsbereich, nicht den isolierten Geltungsbereich der Richtlinie.Wie kann ich das überwinden?

Klicken Sie hier für jsFiddle.

Answer 1

Du hast zwei Dinge vergessen:

1. Standardmäßig verwendet AngularJS eine Attributbeschränkung, daher sollten Sie in Ihrem Fall in der Direktivendefinition angeben restrict: "E"
2. Sie sollten den untergeordneten Bereich verwenden, aber nicht isoliert.Also fertig scope: true vom übergeordneten Ansichtsbereich erben.

Siehe aktualisierte Geige http://jsfiddle.net/Y9g4q/1/.

Viel Glück.

Answer 2

Es gibt einige Probleme in Ihrem Code.

1. Die standardmäßige Einschränkungsoption ist A für das Attribut, daher wird Ihre Direktive auf jeden Fall nicht kompiliert, da Sie sie als Element verwenden.Verwenden restrict: 'E' damit es funktioniert.

2. Gemäß der Dokumentation ist der Geltungsbereich des transkludierten Elements kein untergeordneter, sondern ein gleichgeordneter Geltungsbereich der Direktive.Also boolProperty wird immer undefiniert oder leer sein.Sie müssen also die Scope-Ebene nach oben gehen und das richtige Geschwisterelement finden.

   <div ng-app="app">
      <directive>
       <p>boolProperty: {{$parent.$$childHead.boolProperty}}</p>
       </directive>
   </div>
   

und müssen Transklusion in der Richtlinie verwenden als:

angular.module("app", []).directive("directive", function() {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        template: '<div ng-transclude></div>',
        link: function(scope) {
            scope.boolProperty = true;
        }
    };
});

Dieser Ansatz ist jedoch nicht ratsam und bricht später ab, wenn Sie vor der Direktive einen neuen Controller hinzufügen, da der transkludierte Bereich zum zweiten Geschwister wird, im Gegensatz zum ersten wie zuvor.

<div ng-app="app">
    <div ng-controller="OneCtrl"></div>
    <directive>
        <p>boolProperty: {{$parent.$$childHead.boolProperty || $parent.$$childHead.$$nextSibling.boolProperty}}</p>
    </directive>
</div>

Hier ist das Funktionierende Demo.Der von mir erwähnte Ansatz ist nicht ideal, daher erfolgt die Verwendung auf eigenes Risiko.Die Antwort von @CodeHater ist die, die Sie wählen sollten.Ich wollte nur erklären, warum es bei Ihnen nicht funktioniert hat.

Answer 3

Von dem Dokumente:

As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.

Es scheint, dass Sie explizit hinzufügen müssten boolProperty Zu scope.

<div ng-app="app" ng-controller="ctrl">    
    <directive bool="boolProperty">
        <p>boolProperty: {{boolProperty|json}}</p>
    </directive>
</div>

JS

angular.module("app", []).controller("ctrl",function($scope){
    $scope.boolProperty = false;
}).directive("directive", function() {
    return {
        restrict:"E",
        scope: {boolProperty:'=bool'},
        link: function($scope) {
            $scope.boolProperty = "i'm a boolean property";
        }
    };
});

Hier ist aktualisiert Geige.