Was ist Bereich innerhalb der Direktive tut in AngularJS

Question

Ich lerne eckig und ich bin von jQuery Hintergrund und konfrontiert Problem, um Winkel zu halten. so stolpere ich oft, um viele Dinge im Winkelcode zu verstehen.

Nur den Code unten gesehen und ich verstehe nicht, was Umfang in den unten genannten Direktiven macht?

Aber wenn ich den Bereich von der Direktive entfernen dann was wird nicht funktionieren? also bitte helfen Sie mir, die Verwendung von Umfang und seine Bedeutung mit einem Beispiel zu verstehen, wenn möglich.

Dank

<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li> 

    myApp.directive('myDirective', function(){ 
     return { 
     scope: { price: '=' }, 
     require: 'ngModel', 
     link : function(scope){ 
      console.log(scope.price) 
     }, 
     controller: function(scope, element, attrs, ngModel){ 
      console.log(ngModel.price); 
      console.log(scope.price); 
     } 
     } 
    }); 

Answer 1

In diesem Beispiel, das Sie scope: { price: '=' } haben, heißt es, dass interner Umfang variable price der Richtlinie genau zu Eltern Umfang binded wird. Es hat Zugriff darauf und ich werte Änderungen im übergeordneten Bereich, der Wert der Direktive price wird sich ebenfalls ändern.

Entfernen Sie diese Zeile aus Ihrer Direktive scope: { ... } und Ihre Anweisung wird dann keinen neuen Bereich erstellen. Aber es wird immer noch funktionieren - was bedeutet, dass es keinen Fehler erzeugen wird. Es gibt Anwendungsfälle, wenn Sie isolated scopes benötigen oder nicht benötigen.

Um herauszufinden, besser, wie die Dinge mit Winkel arbeiten und Bereiche - verwenden Sie die große Ressourcen überprüfen:

1. Winkel vs jQuery - "Thinking in AngularJS" if I have a jQuery background?
2. $ Umfang sich in Winkel - How does data binding work in AngularJS?
3. verschiedene Arten von Bereichsvariablen in Anweisungen - What is the difference between '@' and '=' in directive scope in AngularJS?

Answer 2

Wenn Sie das Bereichskonfigurationsobjekt nicht angeben, das die Anweisung verwendet, ist der Bereich des übergeordneten Bereichs. Wenn Sie jedoch das Bereichsobjekt angeben, wird ein eigener isolierter Bereich erstellt.

Wenn Sie also das Scope-Objekt nicht erwähnen, haben Sie direkten Zugriff auf Variablen von Ihrem übergeordneten Controller.

ref: http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/