J'ai une boucle simple avec ng-repeat
comme ceci :
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Il y a une fonction dans le contrôleur $scope.removeTask(taskID)
.
Pour autant que je sache, Angular rendra d'abord la vue et remplacera l'interpolation {{task.id}}
par un nombre, puis, sur l'événement de clic, évaluera la chaîne ng-click
.
Dans ce cas, ng-click
obtient totalement ce qui est attendu, c'est-à-dire : ng-click="removeTask(5)" ;.
Cependant... cela ne fait rien.
Bien sûr, je peux écrire un code pour récupérer task.id
à partir du tableau $tasks
ou même du DOM, mais cela ne semble pas être la méthode Angular.
Donc, comment peut-on ajouter du contenu dynamique à la directive ng-click
à l'intérieur d'une boucle ng-repeat
?
Au lieu de
<button ng-click="removeTask({{task.id}})">remove</button>
faites ceci :
<button ng-click="removeTask(task.id)">remove</button>
Veuillez voir ce violon :
Une chose qui m'a vraiment gêné, c'est que lorsque j'ai inspecté ce code html dans le navigateur, au lieu de le voir développé en quelque chose comme.. :
<button ng-click="removeTask(1234)">remove</button>
j'ai vu :
<button ng-click="removeTask(task.id)">remove</button>
Cependant, ce dernier fonctionne !
C'est parce que vous êtes dans le "monde d'Angular", lorsque vous êtes dans ng-click="" ; Angular connaît déjà task.id puisque vous êtes dans son modèle. Il n'est pas nécessaire d'utiliser la liaison de données, comme dans {{}}.
De plus, si vous voulez passer l'objet tâche lui-même, vous pouvez le faire comme suit :
<button ng-click="removeTask(task)">remove</button>
Cela fonctionne. Merci. J'injecte du html personnalisé et le compile en utilisant Angular dans le contrôleur.
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);