Am o buclă simplă cu ng-repeat
astfel:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Există o funcție în controler $scope.removeTask(taskID)
.
Din câte știu eu, Angular va reda mai întâi vizualizarea și va înlocui interpolarea {{{task.id}}`` cu un număr, iar apoi, la evenimentul click, va evalua șirul
ng-click`.
În acest caz, ng-click
obține în totalitate ceea ce se așteaptă, adică: ng-click="removeTask(5)".
Cu toate acestea... nu'face nimic.
Bineînțeles că pot scrie un cod pentru a obține task.id
din array-ul $tasks
sau chiar din DOM, dar aceasta nu pare a fi calea Angular.
Așadar, cum se poate adăuga conținut dinamic la directiva ng-click
în interiorul unei bucle ng-repeat
?
În loc de
<button ng-click="removeTask({{task.id}})">remove</button>
faceți așa:
<button ng-click="removeTask(task.id)">remove</button>
Vă rugăm să consultați această vioară:
Un lucru care m-a blocat cu adevărat, a fost atunci când am inspectat acest html în browser, în loc să îl văd extins la ceva de genul:
<button ng-click="removeTask(1234)">remove</button>
Am văzut:
<button ng-click="removeTask(task.id)">remove</button>
Cu toate acestea, acesta din urmă funcționează!
Acest lucru se datorează faptului că vă aflați în "Angular World", când în interiorul ng-click="" Angular știe deja despre task.id, deoarece vă aflați în interiorul modelului acestuia. Nu este nevoie să folosiți Data binding, ca în {{}}.
Mai mult, dacă ați dorit să treceți obiectul task în sine, puteți ca:
<button ng-click="removeTask(task)">remove</button>
acest lucru funcționează. mulțumesc. Injectez html personalizat și îl compilez folosind angular în controler.
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);