AngularJS - ディレクティブ値の外側への入力の変更

Question

私はAngularの初心者です。ディレクティブの外側からデータを取得する方法を理解できません。私は様々な入力が更新されており、このデータを受け取り、それを使用するための指示が必要です。たとえば、以下のコードでは、最初の入力フィールドはディレクティブにフックされ、正常に動作しますが、2番目の入力フィールドにディレクティブ属性を入れずに、ディレクティブでそのフィールドに入力されたデータをどのように更新できますか？

HTML：

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

指令：

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

ディレクティブは新しいスコープを作成しないため、ディレクティブのリンクメソッド内の変数scopeは、2つの入力を含む外側スコープを指します。だから、置き換えることができます。

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

を

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

でテストするときに、第2の入力にいくつかのデータを入力してくださいまたは、それはundefinedを印刷します。

Here is a working fiddle

---

EDIT：ここでの違いは、今通っている

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

：あなたのディレクティブでスコープを隔離使用する必要がなかった場合、あなたはHTMLで次の操作を行うことができtest2モデルをディレクティブに追加し、scopeプロパティを追加してディレクティブにバインドを設定します。

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` 
}, 

これにより、ディレクティブで渡された値にアクセスできます。次のように次に、あなたの$watch ESを変更します

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

私は別の例で、test3とtest4としての私のバイオリンでこれを含めました。

Answer 2

私はテキストであると説明している可能性がありますが、私はあなたがjohn lindquistすることにより、これらの3本のビデオを見た場合、それははるかに良いことだと思う：

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

とsummary。

非常に短く（それぞれ〜4分）、非常に簡単で便利です。

PS：ところで、他の人も見てみることをお勧めします。彼らはすべて短くて正確で、愛されています。

Answer 3

AngularJsディレクティブを使用すると、単離され、あなたが変数とバインドを渡すことができますが、スコープを使用.IF孤立を継承し、need.Youはない継承として、あなたのスコープを使用することができますさまざまな方法でスコープを使用して、多くのクールなものにあなたを行うことができますそれはあなたが欲しいところです。

ここであなたを助けることができる例と2つのクールの記事は、ある

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