次のような ng-repeat
を使ったシンプルなループがあります。
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
コントローラには $scope.removeTask(taskID)
という関数があります。
私の知る限り、Angular はまずビューをレンダリングして、補間された {{task.id}}
を数字に置き換え、クリックイベントで ng-click
文字列を評価します。
この場合、ng-click
は完全に期待通りの結果になります。すなわち、ng-click="removeTask(5)".
しかし...何もしていません。
もちろん、task.id
を $tasks
配列や DOM から取得するコードを書くこともできますが、これは Angular のやり方ではないようです。
では、どうすれば ng-repeat
ループ内の ng-click
ディレクティブに動的コンテンツを追加することができるのでしょうか?
の代わりに
<button ng-click="removeTask({{task.id}})">remove</button>
のようにします。
<button ng-click="removeTask(task.id)">remove</button>
このフィドルをご覧ください。
1つだけ気になったのは、このhtmlをブラウザで確認すると、以下のように展開されているのではなく、以下のようになっていることです。
<button ng-click="removeTask(1234)">remove</button>
と表示されました。
<button ng-click="removeTask(task.id)">remove</button>
しかし、後者の方がうまくいきました
ng-click=""の中では、Angularはモデルの中にいるので、task.idを知る準備ができているからです。のように、データバインディングを使う必要はありません。
さらに、タスクオブジェクト自体を渡したい場合は、次のようにします。
<button ng-click="removeTask(task)">remove</button>
ありがとうございます。私は、カスタムHTMLを注入し、コントローラ内でangularを使用してコンパイルしています。
var tableContent= '<div>Search: <input ng-model="searchText"></div>'
+'<div class="table-heading">'
+ '<div class="table-col">Customer ID</div>'
+ ' <div class="table-col" ng-click="vm.openDialog(c.CustomerId)">{{c.CustomerId}}</div>';
$timeout(function () {
var linkingFunction = $compile(tableContent);
var elem = linkingFunction($scope);
// You can then use the DOM element like normal.
jQuery(tablePanel).append(elem);
console.log("timeout");
},100);