11

ng-repeatループで引数を受け取るカスタムコンポーネントを作成しようとしています。たとえば、ng-repeatでカスタム引数「name」を受け取る「mycomp」という名前のコンポーネントがあるとします。

<mycomp name="{obj.name}" ng-repeat="obj in list" />

そして私のディレクティブでは、分離されたスコープは次のように定義されています。

scope:{name:"@"}

ng-repeatは、反復する要素ごとに分離されたスコープを作成するため、これは機能しません。そのため、2つのレベルのスコープを持つことになりました。

この問題を回避するにはどうすればよいですか？私は何か間違ったことをしていますか？

ありがとう。

4

1 に答える 1

16

あなたの最初の質問のコメントで述べたように、これはすでに答えられています。とにかく、ここに要約されています：

テンプレートで、継承するモデルを{{}}なしで記述します（角かっこを使用すると、モデル自体への参照ではなく、値が渡されるため）：

<mycomp name="obj.name" ng-repeat="obj in list" />

そして、ディレクティブで、次のように双方向バインディングを確立します。

scope:{name:"="}

編集：

私は今（あなたのコメントの後）、これはあなたの問題を解決しますが、それは質問に完全には答えないことに気づきます。ここに行きます：

scope: trueディレクティブを作成するときは、またはscope: {...}をそれぞれ指定することにより、親（コントローラー、通常は必須ではありませんが）または「分離された」スコープから継承するスコープを作成することを選択できます。

したがって、分離されたスコープを作成することにより、すべての親のモデルを使用できます（scope.obj（ng-repeatを介して作成）にアクセスできますが、scope.listにもアクセスできます）。これは便利ですが、もちろん危険でもあります（そして、実際には再利用可能なコードを作成しません）。

分離スコープを作成する場合は、「@」、「=」、または「＆」を使用してスコープのモデルを指定できます。

'@'と'＆'はどちらも、分離されたバインドされていない値を生成します（変更すると、分離されたスコープでのみ変更されます。この場合、元のリストのオブジェクトはまったく変更されません）。唯一の違いは次のとおりです。 '@'は文字列値を読み取り、'＆'は式を読み取ります。 これは重要です：コードが機能しなかったと私が信じる理由は、（のみ）渡したためでname="{obj.name}"ありname="{{obj.name}}"、「@」を使用すると文字列値が読み取られ、その文字列値はobjの名前になる可能性がありますが、 {{}}に含めてください！

'='を使用する場合は、その変数を指定された外部変数にバインドすることを宣言しています。したがって、（クレイジーでクレイジーな怒りに！）同じ値で起動する2つのモデルをディレクティブに含めたいが、onがバインドされている（つまり、変更がスコープ外に伝播される）場合は、何かを行うことができます。このような：

<mycomp binded-name="obj.name" unbinded-name="{{obj.name}}" ng-repeat="obj in list" />

そしてあなたの指令で：

scope:{
  bindedName: "=",
  unbindedName: "@"
}
于 2012-11-19T15:54:42.797 に答える