AngularJS-Direktiven - Isolierter Bereich und geerbter Bereich

Question

Ich habe versucht, den Unterschied zwischen isoliertem Bereich und geerbtem Bereich in der Direktive zu verstehen. Dies ist ein Beispiel, das ich bereit, mich verständlich zu machen:

Die HTML-

<div ng-controller="AppController"> 
    <div my-directive> 
     Inside isolated scope directive: {{myProperty}} 
    </div> 

    <div my-inherit-scope-directive> 
     Inside inherited scope directive: {{myProperty}} 
    </div> 
</div> 

Die JS

angular.module("myApp", []) 
     .directive("myInheritScopeDirective", function() { 
      return { 
       restrict: "A", 
       scope: true 
      }; 
     }) 
     .directive("myDirective", function() { 
      return { 
       restrict: "A", 
       scope: {} 
      }; 
     }) 
     .controller("AppController", ["$scope", function($scope) { 
      $scope.myProperty = "Understanding inherited and isolated scope"; 
     }]); 

Ausführen des Codes mit kantigem-1.1.5, es funktioniert wie Ich habe erwartet: Die {{myProperty}} in my-directive wird undefined sein wegen isolierten Bereichs, während für die my-inherit-scope-Direktive {{myProperty}} den Werthaben wird.

Aber Ausführung mit Angular-1.2.1, in beiden Richtlinien {{myProperty}} Ausgänge Understanding inherited and isolated scope.

Alles, was ich vermisse?

Answer 1

Der Textknoten innerhalb Ihrer Anweisung ist an den Controllerbereich gebunden. Daher hat der Anwendungsbereich der Richtlinie keine Wirkung. Ich denke, das hat changed ab v1.2. Sie haben eine Vorlage für Ihre Richtlinie verwenden:

.directive("myIsolatedDirective", function() { 
    return { 
     template: 'Inside isolated in template scope directive: {{myProperty}}', 
     restrict: "A", 
     scope: { 
      myProperty: '=' 
     } 
    }; 
}) 

prüfen this fiddle.