AngularJS - Eingangswechsel außerhalb der Richtlinie Wert in Richtlinie übergeben

Question

Ich bin ein Anfänger zu Angular und ich kann nicht herausfinden, wie man Daten von außerhalb einer Direktive abrufen. Ich habe verschiedene Eingaben aktualisiert und ich brauche die Richtlinie, um diese Daten zu nehmen und damit zu arbeiten. Im folgenden Beispiel ist das erste Eingabefeld an die Direktive angeschlossen und funktioniert einwandfrei, aber ohne dass das directive-Attribut auf das zweite Eingabefeld gesetzt wird, wie können die in diesem Feld eingegebenen Daten in der Direktive aktualisiert werden?

HTML:

<div ng-app="myDirective"> 
    <input type="text" ng-model="test1" my-directive> 
    <input type="text" ng-model="test2"> 
</div> 

Richtlinie:

angular.module('myDirective', []) 
    .directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.ngModel, function (v) { 
       console.log('New Value from field 1: ' + v); 
       //console.log('New Value from field 2: ' + ???); 
      }); 
     } 
    }; 
}); 

Answer 1

Da Ihre Anweisung keinen neuen Bereich erstellt, verweist die Variable scope innerhalb der Verknüpfungsmethode der Richtlinie auf den äußeren Bereich, der die beiden Eingänge enthält. So können Sie ersetzen:

//console.log('New Value from field 2: ' + ???); 

mit

console.log('New Value from field 2: ' + scope.test2); 

Stellen Sie sicher, einige Daten in dem zweiten Eingang betreten beim Testen oder es wird undefined drucken.

Here is a working fiddle

---

EDIT: Wenn Sie Rahmen in Ihrer Richtlinie verwendet haben müssen, isolieren, könnten Sie die folgenden in Ihrem HTML tun:

<input type="text" ng-model="test1" my-directive="test2"> 
<input type="text" ng-model="test2"> 

Der Unterschied hier ist jetzt vorbei in der test2 Modell in die Richtlinie, und richten Sie eine Bindung an es in Ihrer Richtlinie durch Hinzufügen der scope Eigenschaft:

scope: { 
    otherInput: '=myDirective' 
    // this tells the directive to bind the local variable `otherInput` 
    // to whatever the `my-directive` attribute value is. In this case, `test2` 
}, 

Damit können Sie auf die übergebenen Werte in Ihrer Anweisung zugreifen. Sie würden dann Ihr $watch es wie folgt ändern:

scope.$watch(attrs.ngModel, function (v) { 
    console.log('New Value from field 1: ' + v); 
    console.log('New Value from field 2: ' + scope.otherInput); 
}); 

// notice the syntax for watching a scope variable 
scope.$watch('otherInput', function (v) { 
    console.log('New Value from field 1: ' + scope.test1); 
    console.log('New Value from field 2: ' + v); 
}); 

Ich habe dies als ein weiteres Beispiel in meiner Geige enthält, test3 und test4.

Answer 2

ich erklärt hätte, dass im Text, aber ich denke, es wäre viel besser, wenn Sie diese 3 Videos von john lindquist sehen:

• Isolate Scope "@"
• Isolate Scope "="
• Isolate Scope "&"

Und summary.

Sie sind wirklich kurz (~ 4min jeder) aber sehr einfach und nützlich.

PS: Übrigens, ich empfehle Ihnen, auch andere zu beobachten. Sie sind alle kurz und präzise, ​​liebten sie.

Answer 3

AngularJS Richtlinie können Sie Rahmen mit verschiedenen Möglichkeiten nutzen und Sie tun viele coole Dinge need.You können Ihr Umfang als nicht inherit verwenden, erben und isoliert .Wenn Sie Bereich zu verwenden, wie isoliert, können Sie Variablen und binden passieren es wo immer du willst.

hier sind zwei coole Artikel mit Beispielen, die Sie

http://www.w3docs.com/snippets/angularjs/change-variable-from-outside-of-directive.html

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html