ディレクティブはAngularJSのng-repeatスコープでスコープを分離します

（他の場所でディレクティブを再利用できるように）分離スコープを持つディレクティブがありng-repeat、このディレクティブをで使用すると、機能しません。

このトピックに関するすべてのドキュメントとスタックオーバーフローの回答を読み、問題を理解しました。通常の問題をすべて回避できたと思います。

したがって、ng-repeatディレクティブによって作成されたスコープが原因でコードが失敗することを理解しています。私自身のディレクティブは、isolateスコープを作成し、親スコープ内のオブジェクトに双方向のデータバインディングを行います。私のディレクティブは、このバインドされた変数に新しいオブジェクト値を割り当てます。これは、私のディレクティブを使用しない場合ng-repeat（親変数が正しく更新される場合）に完全に機能します。ただし、ng-repeatでは、割り当てによってng-repeatスコープ内に新しい変数が作成され、親変数には変更が反映されません。これはすべて、私が読んだ内容に基づいて予想どおりです。

また、特定の要素に複数のディレクティブがある場合、1つのスコープのみが作成されることも読みました。そしてpriority、各ディレクティブにa を設定して、ディレクティブが適用される順序を定義できます。ディレクティブは優先度でソートされてから、それらのコンパイル関数が呼び出されます（http://docs.angularjs.org/guide/directiveで優先度という単語を検索してください）。

したがって、優先順位を使用してディレクティブが最初に実行され、最終的に分離スコープが作成されるようにし、ng-repeat実行時に親スコープからプロトタイプを継承するスコープを作成する代わりに分離スコープを再利用できることを望んでいました。ng-repeatドキュメントは、優先レベルでそのディレクティブの実行と述べています1000。1優先度が高いか低いかは不明です。1ディレクティブで優先度を使用しても違いはないので、試してみました2000。しかし、それは事態をさらに悪化させます。私の双方向のバインディングがなりundefined、私のディレクティブは何も表示しません。

私は自分の問題を示すためのフィドルを作成しました。priorityディレクティブの設定をコメントアウトしました。名前オブジェクトのリストと、名前オブジェクトのname-row姓名フィールドを表示するという名前のディレクティブがあります。表示された名前をクリックselectedすると、メインスコープに変数を設定して欲しい。名前の配列、selected変数はname-row双方向のデータバインディングを使用してディレクティブに渡されます。

メインスコープで関数を呼び出すことでこれを機能させる方法を知っています。また、selectedが別のオブジェクトの内部にあり、外部オブジェクトにバインドすると、問題が発生しないことも知っています。しかし、私は現時点ではそれらの解決策には興味がありません。

代わりに、私が持っている質問は次のとおりです。

• どうやって防ぐか ng-repeat親スコープからプロトタイプ的に継承するスコープを作成せずに、ディレクティブの分離スコープを使用するにはですか？
• なぜ優先レベルなのか 2000ディレクティブのしないのですか？
• バタランを使用して、どのタイプのスコープが使用されているかを知ることは可能ですか？

さて、上記のコメントの多くを通して、私は混乱を発見しました。まず、いくつかの点を明確にします。

• ngRepeatは選択した分離スコープに影響しません
• あなたのディレクティブの属性で使用するためにngRepeatに渡されたパラメータはない prototypically-継承されたスコープを使用します
• ディレクティブが機能しない理由は、分離スコープとは関係ありません

以下は同じコードの例ですが、ディレクティブが削除されています。

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

ここでJSFiddleそれが動作しないことを証明するには。ディレクティブとまったく同じ結果が得られます。

なぜ機能しないのですか？AngularJSのスコープはプロトタイプの継承を使用するためです。selected親スコープの値はプリミティブです。JavaScriptでは、これは、子が同じ値を設定すると上書きされることを意味します。AngularJSスコープにはゴールデンルールがあります。モデルの値には常に a .が必要です。つまり、それらは決してプリミティブであってはなりません。このSOの答えを見てくださいをしてください。

スコープの最初の外観は次のとおりです。

最初の項目をクリックすると、スコープは次のようになります。

selectedngRepeatスコープに新しいプロパティが作成されたことに注意してください。コントローラースコープ003は変更されませんでした。

2番目の項目をクリックすると、おそらく何が起こるかを推測できます。

したがって、あなたの問題は実際にはngRepeatによって引き起こされるのではなく、AngularJSの黄金律を破ることによって引き起こされます。それを修正する方法は、単にオブジェクトプロパティを使用することです。

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

これが2番目のJSFiddleですあまりにもこの作品を示したが。

スコープの初期状態は次のとおりです。

最初のアイテムをクリックした後：

ここでは、必要に応じてコントローラーのスコープが影響を受けています。

また、これが分離スコープを持つディレクティブでも機能することを証明するために（これも問題とは関係がないため）、ここにもJSFiddleがあり、ビューはオブジェクトを反映する必要があります。必要な唯一の変更は、プリミティブではなくオブジェクトを使用することでした。

最初のスコープ：

最初の項目をクリックした後のスコープ：

結論としては、もう一度、問題は分離スコープではなく、ngRepeatの動作方法ではありません。あなたの問題は、あなたがこのまさに問題につながることが知られているルールを破っているということです。AngularJSのモデルには常にが必要.です。

質問への回答を直接避けようとせずに、代わりに次のフィドルを見てください。

http://jsfiddle.net/dVPLM/

重要な点は、Angularの従来の動作と戦い、変更しようとする代わりに、ng-repeatそれをオーバーライドしようとするのではなく、動作するようにディレクティブを構成できることです。

テンプレートで：

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

あなたのディレクティブで：

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

あなたの質問に答えて：

• ng-repeat スコープを作成します。これを変更しようとしてはいけません。
• ディレクティブの優先順位は実行順序だけではありません-以下を参照してください： AngularJS：HTMLコンパイラはコンパイルの順序をどのように調整しますか？
• バタランでは、[パフォーマンス]タブを確認すると、各スコープにバインドされた式を確認し、これが期待と一致しているかどうかを確認できます。