2013-11-09 4 views
5

私はAngularJSの新しいユーザーです。ng-repeat内のディレクティブからコントローラ内の変数にアクセスする必要があるときに悩まされています。スコープに関連するものでなければならないと思う。ここでng-repeat内のディレクティブからコントローラスコープにアクセスする方法は?

は私のバイオリンだ:「アイテム」、配列、および「もの」、単なる文字列:http://jsfiddle.net/Zzb58/1/

「MyCtrl」スコープは、2つのプロパティがあります。

だから、
function MyCtrl($scope) { 
    $scope.items = [{id: 'item1'}, {id: 'item2'}];  
    $scope.thing = "thing"; 
} 

、私はディレクティブを作成し、私はそれが配列の内容を読みたい場合は、この1つは完璧に動作します:

<div my-directive ng-repeat="item in items" item='item'></div> 
app.directive('myDirective', function() { 
    return { 
     restrict: 'AE', 
     scope: { 
      item: '=item', 
     }, 
     template: '<div>{{ item.id }}</div>' 
    } 
}); 

HTMLが正しく更新されます。

しかし、 "thing"変数にディレクティブからアクセスしようとすると、常に "undefined"として読み込まれます。

app.directive('myDirective', function() { 
    return { 
     restrict: 'AE', 
     scope: { 
      item: '=item', 
      thing: '=' 
     }, 
     template: '<div>{{ item.id }} - Here is not the {{thing}}</div>' 
    } 
}); 

は、私はこの問題はNGリピート、または多分変数が正しくバインドされていないで作成されたスコープの子に関連することがあると思います。

テンプレートで$ parent.thingを使用すると変数が読み込まれ、正しく評価されますが、その$ parentがng-repeatスコープか 'MyCtrl'スコープであるかどうかはわかりません。

1)私は間違っていますか?

2)ng-repeatに読み込まれた「item」要素をHTML要素の属性として配置する必要があるのはなぜですか?最初に "items"が親スコープにあると思ったので、ディレクティブの分離されたスコープが作成されたら、 "items: '='"のようなことをしなければなりません。

+1

'='を使用すると、 'thing =" thing "'のように属性を渡す必要があります。 – elclanrs

答えて

4

オブジェクトを割り当てると、分離スコープが作成されます。 scope : trueを設定した場合は、例のように使用できます。そうでない場合は、itemのように属性として渡す必要はありません。スコープの異なるモードの説明については

http://jsfiddle.net/Zzb58/2/

は、あなたがこのページにディレクティブセクションを読むことができます:継承されたスコープ値を操作する場合一般的であるが、特に https://github.com/angular/angular.js/wiki/Understanding-Scopes

、私はまた、非常に使用することをお勧めしますこれは、プロトタイプの継承がどのように機能するかによって、スコープ全体に分離する可能性があるため、単純な文字列変数の代わりにプロパティが設定されたオブジェクトです。

+0

それは動作します!スコープとJavaScriptのプロトタイプの継承を理解し始めていると思います...ありがとうございます! – Jorge

+0

あなたは大歓迎です(: –

関連する問題