Bunun gibi ng-repeat
ile basit bir döngüm var:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Denetleyicide $scope.removeTask(taskID)
adında bir işlev vardır.
Bildiğim kadarıyla Angular önce görünümü oluşturacak ve enterpolasyonlu {{task.id}}
yi bir sayı ile değiştirecek ve ardından tıklama olayında ng-click
dizesini değerlendirecek.
Bu durumda ng-click
tamamen bekleneni alır, yani: ng-click="removeTask(5)".
Ancak... hiçbir şey yapmıyor.
Elbette $tasks
dizisinden veya hatta DOM'dan task.id
almak için bir kod yazabilirim, ancak bu Angular yolu gibi görünmüyor.
Peki, bir ng-repeat
döngüsü içindeki ng-click
yönergesine nasıl dinamik içerik eklenebilir?
Bunun yerine
<button ng-click="removeTask({{task.id}})">remove</button>
Bunu yap:
<button ng-click="removeTask(task.id)">remove</button>
Lütfen bu kemana bakın:
Beni gerçekten rahatsız eden bir şey, bu html'yi tarayıcıda incelediğimde, aşağıdaki gibi bir şeye genişletilmiş olarak görmek yerine:
<button ng-click="removeTask(1234)">remove</button>
Gördüm:
<button ng-click="removeTask(task.id)">remove</button>
Ancak, ikincisi işe yarıyor!
Bunun nedeni, ng-click="" içindeyken "Angular Dünyası" içinde olduğunuz için Angular'ın task.id'yi hazır olarak bilmesidir. {{}}'da olduğu gibi Veri bağlama kullanmaya gerek yoktur.
Ayrıca, görev nesnesinin kendisini iletmek isterseniz, şöyle yapabilirsiniz:
<button ng-click="removeTask(task)">remove</button>
Bu işe yarıyor. Teşekkürler. Özel html enjekte ediyorum ve denetleyicide angular kullanarak derliyorum.
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);