angular.js - AngularJS如何添加的DOM元素且能绑定事件

Question

输入文本框，在生成li元素，且li元素能绑定事件

Answer 1

実際には、これは非常に複雑になる可能性のある問題です。実際には多くの解決策があります。最も簡単なリファレンスを書きます。 リーリー

次に、対応するテンプレート内で次のようにします:

リーリー

これはアイデアです。実際には変動要因が多すぎるため、1 つずつ詳細に説明するのは困難です。同様の問題に対処する際に考慮すべき重要な点は、次のとおりです。

未定義の数とコンテンツの HTML 要素を生成したいため、それらを保持する (双方向バインド) コレクションが必要です

1. 同時に、現在作成中のアイテムを保存するためのオブジェクトと、このアイテムをコレクションに保存してリセットするためのメソッドが必要です
2.1 もちろんオブジェクトは必要ありませんが、追加されたときに input の値をキャプチャしますが、これは angular での書き方ではなく、jQuery での書き方です
2. 
   私が決定できるのは、どのタグを使用するか、どのイベントをバインドするかであるため、これらをテンプレートに記述し、1 のコレクション走査で生成できます。 input 的值，但这不是 angular 的写法，这是 jQuery 的写法
3. 我能确定的是用什么标签，绑定什么事件，所以这些东西写在模版里，配合 1 里的集合遍历生成就好了。
4. 上面那个例子最恶心之处在于借助了 $event 的对象，因为它使得我必须在 controller 混入和 DOM 或 Event 相关的代码而不是业务逻辑。当然也有很多解决办法，比如：
   4.1 在 2 的基础上，我不单纯用一个字符串保存 li 项的文字内容，而是用一个对象。比如 listItem.text 保存文字内容，然后在添加的时候给它生成一个递增的 listItem.id。这样做有很多好处，比如说 ng-repeat 的时候可以 track by，控制模版输出也会更灵活，绑定的事件处理方法可以不传 $event 而是传 item 或 item.id
   上記の例で最も嫌な点は、$event のオブジェクトを使用していることです。これは、controller の代わりに DOM またはイベント関連のコードを混在させる必要があるためです。ビジネスロジック。もちろん、次のような解決策はたくさんあります:
4.1 2をベースに、li項目のテキスト内容を単純に文字列で保存するのではなく、オブジェクトを使用します。たとえば、listItem.text はテキスト コンテンツを保存し、追加時にそれに対して増分する listItem.id を生成します。これを行うことには多くの利点があります。たとえば、ng-repeat を track by にすることができ、テンプレート出力の制御がより柔軟になります。バインドされたイベント処理メソッドは必要ありません。 >$event を渡す代わりに、item または item.id を渡してお待ちください

4.2 ただし、バインドされたイベント処理メソッドが DOM を操作する必要がある場合は、それをディレクティブとして記述するのが最善であり、データ (リスト項目のコレクション) は引き続きコントローラー内に保持できます🎜 🎜

Answer 2

ng パラメータを含む動的に挿入された HTML の場合、angularjs は通常、HTML を 2 回解析しません。
依存関係注入を使用して $compile を呼び出し、ローカル コードを書き換えてコンパイルすることができます。