ng-repeatループでオブジェクト変数名を避けることはできますか？

Question

ng-repeatディレクティブを定義して配列を反復処理する場合、構文にはng-repeat="friend in friends"が指定され、テンプレート内には{{friend.name}}のようなインターポレーション演算子が使用されます。

プロパティを現在のアイテムスコープに割り当てることはできますか？だから{{friend.name}}の代わりに{{name}}と呼ぶことができますか？

私の指示が2つの異なるテンプレートの範囲で使用されている理由です。例えば、が作成しないリピータと無関係なテンプレートの両方で使用される指示文"userActions"があるかもしれません。センス。私は意味的な意味を持たないfriendオブジェクトを人工的に製造することを避けたいと思います。

---

私のユースケースは、このようなものです：私は、様々なタイプのブロックをレンダリングするグリッドを持って

。いくつかの擬似コード：

<div ng-repeat="block in blocks"> 
    < cat block /> 

    < friend block > 
     <userActions directive /> 
    </ friend block > 

    < guitar block /> 

    .... more blocks 
</div> 

私もまったく同じユーザのアクションが含まれている友人のページを持っている：

今

..fragment of friend page.. 
    <element ng-control="friend"> 
    <userActions directive /> 
    </element> 

、私は、ユーザーにリピータ内のブロックのプロパティをしたい場合は、構文は{{block.name}}です。したがって、userActionsのテンプレートにはこれが含まれています。

ただし、フレンドのページでこのテンプレートを使用すると、フレンドコントローラの範囲内に{{block.name}}を作成する必要があります。ブロックはブロックグリッドのコンテキスト内にしか存在しないため、これは意味をなさない。私はこれを作成する必要はありませんblock。

ブロックスコープとコントローラの両方にそれが含まれているので、ディレクティブテンプレート内から{{name}}を呼び出すだけです。 blockオブジェクトを作成したくない場合は、ディレクティブを使用する各スコープに人工的にblock.nameを設定します。

は、ここでそれはすべてがあなたのディレクティブを構造化する方法によって異なりjsFiddle to illustrate the cause

Answer 1

Mathew Bergとganarajの有益な回答を私の新しい知り合いと組み合わせて、これに対する有益な答えをつくることにしました。

短い答えはあなたは本当にそれをしたくありません。 。

新しいスコープは、各ブロック要素のために作成され、すべてのブロックオブジェクトのプロパティは、各ブロックのscope.blockに作成され、「ng-repeat="block in blocksを使用してこれは、次のとおりです。

---

長い答えはこれですこれは、すべてのプロパティが参照、更新、または監視されたものでアクセスできることを意味するからです。

ng-repeatは、すべてのプロパティがブロックの有効範囲にスラップされている場合、blockのすべてのプリミティブ文字列、整数など）は、ブロックオブジェクトをブロックスコープオブジェクトに追加します。 1つの変更は他のものに反映されず、それは悪いことです。 More info on that here.

ここで、それは悪いことではなく良いことだと判断したので、意味論的な問題をどのように克服するのですか？私は私の指示の範囲にオブジェクトとしてfriendDataオブジェクトコンテナを使用することを決めた、とそうディレクティブはfriend-data属性は関係なく、その関連特性

angular.module('myApp',[]) 
.directive("lookActions", function(){ 
    return {    
     restrict: 'E',   
     template: "<input value='Kill -{{ friendData.name }}-' type='button'>", 
     scope : { 
      friendData : '='    
     } 
    } 
}); 

私はこのオブジェクトを割り当てることができますこの方法を保持することを期待しますコンテキスト私はディレクティブテンプレートを呼び出しています。

<div class="block" ng-repeat="block in blocks" >    
     <look-actions friend-data="block" /> 
    </div> 

それとも差コンテキストで：

<div ng-controller="friendCtrl"> 
     <look-actions friend-data="data" /> 
    </div> 

- ng-repeat内

ディレクティブを呼び出す方法

function gridCtrl($scope) {  
    $scope.blocks = [{ type: "cat", name: "mitzi"},{ type: "friend", name: "dave"},{ type: "guitar", name: "parker"}]; 
} 


function friendCtrl($scope) {  
    $scope.data={ 
     name: "dave" 
    } 
} 

：これらのコントローラコンテキストを考える

ここをクリックしてくださいsolution Fiddle

ありがとうございました！

Answer 2

です。あなたのコードがどのように見えるのかを知るのは難しいです。ここでは暗闇の中で刺すようです。今あなたが言うことは、あなたのディレクティブfriend.nameを使用している場所でのことです。それは理にかなっていません。 person.nameのようなもっと一般的なものがおそらくもっと適切かもしれません。その場合、あなたは人を関連付けることがしたいディレクティブに渡すように、次の操作を行うことができます。

Htmlの

<div data-ng-repeat="friend in friends"> 
    {{ friend.name }} 
    <div class="myDirective" data-person="friend"></div> 
</div> 

javascriptの

.directive("myDirective", function(){ 
    return { 
     restrict: 'C', 
     scope: { 
      person: "=person" 
     }, 
     template: "<div>{{ person.name }}</div>" 

    } 
}); 

jsfiddle：http://jsfiddle.net/5aVLf/1/