1

2 つのプロパティを持つ分離スコープを持つディレクティブを作成しました。そのうちの 1 つは、等号を使用してデータ バインディングに設定されています。ディレクティブを手動で HTML ドキュメントに数回挿入すると、期待どおり、値の変更がコントローラーのスコープに反映されます。しかし、リピーター (ng-repeat) を使用して要素を挿入すると、コントローラーのスコープへの接続が機能しなくなります。理由はありますか？

ディレクティブは次のようになります。

myApp.directive("phone", function(){
return{
    restrict: "E",
    scope:{
        number:"@",
        dirname:"="
    },
    template:  '<div class="panel"> <input type="text" ng-model="dirname"><br>Number:{{number}}  {{dirname}}</div> '

}

});
4

1 に答える 1

3

（HTMLまたはモデルデータを提供しなかったため）ディレクトリ名の配列があるため、ng-repeat内でng-modelをプリミティブにバインドしようとしていると思います。ng-repeat の反復ごとに独自の子スコープが作成されるため、最初にテキスト ボックスに入力するとdirname、子スコープにプリミティブ プロパティが作成されます。(これが、JavaScript プロトタイプの継承のしくみです。)

修正は、プリミティブではなくオブジェクトを使用することです。

$scope.names = [ {name: 'Superhero'}, {name: 'Julio'} ];

<li ng-repeat="nameObj in names">
   <phone number="123" dirname="nameObj.name"></phone>
</li>

フィドル。

于 2013-04-12T15:18:02.390 に答える