Ich habe eine einfache Schleife mit "ng-repeat" wie diese:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Es gibt eine Funktion in der Steuerung $scope.removeTask(taskID)
.
Soweit ich weiß, wird Angular zuerst die Ansicht rendern und die interpolierte {{task.id}}
durch eine Zahl ersetzen, und dann, beim Klick-Ereignis, den ng-click
String auswerten.
In diesem Fall ng-click
bekommt völlig, was erwartet wird, dh: ng-click="removeTask(5)".
Jedoch... es's nicht tun nichts.
Natürlich kann ich einen Code schreiben, um task.id
aus dem $tasks
Array oder sogar dem DOM zu erhalten, aber das scheint nicht der Angular Weg zu sein.
Wie kann man also dynamischen Inhalt zur ng-click
Direktive innerhalb einer ng-repeat
Schleife hinzufügen?
Anstelle von
<button ng-click="removeTask({{task.id}})">remove</button>
dies tun:
<button ng-click="removeTask(task.id)">remove</button>
Bitte sehen Sie sich diese Fiddle an:
Eine Sache, die mich wirklich gestört hat, war, als ich diese HTML-Datei im Browser inspiziert habe, anstatt sie als etwas wie erweitert zu sehen:
<button ng-click="removeTask(1234)">remove</button>
sah ich:
<button ng-click="removeTask(task.id)">remove</button>
Letzteres funktioniert jedoch!
Das liegt daran, dass Sie sich in der "Angular World" befinden, wenn Sie innerhalb von ng-click="" Angular weiß bereits über task.id Bescheid, da Sie sich innerhalb des Modells befinden. Es besteht keine Notwendigkeit, Datenbindung zu verwenden, wie in {{}}.
Wenn Sie außerdem das Aufgabenobjekt selbst übergeben möchten, können Sie dies tun:
<button ng-click="removeTask(task)">remove</button>
dies funktioniert. danke. Ich injiziere benutzerdefinierte html und kompilieren Sie es mit Angular in den Controller.
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);