angular.js - AngularJS如何添加的DOM元素且能绑定事件

Question

输入文本框，在生成li元素，且li元素能绑定事件

Answer 1

En fait, c'est un problème qui peut devenir très compliqué. Il existe de nombreuses solutions en réalité, je vais vous écrire la référence la plus simple :

javascript// 在某一个 controller 里：

function DemoController() {
    var vm = this            // 用了 "controller as" 语法的时候会这样写，vm 代表 viewModel

    vm.listItems = []        // 初始化一个数组用于保存将要生成的 li

    vm.listItem = ''         // 用于绑定 input；不声明其实也可以，这里是为了让你看清楚

    // 绑定在 input 上的方法，把新的 listItem 加入数组，然后重置它
    vm.addItem = function() {
        vm.listItems.push(vm.listItem)
        vm.listItem = ''
    }

    // 绑定在 li 上的方法，接受 $event 参数，你可以利用它获取当前被点击的 li
    vm.itemClickHandler = function(event) {
        var currentElement = event.target
        // ...
    }
}

Puis dans le modèle correspondant :

html<input ng-model="vm.listItem">
<button ng-click="vm.addItem()">添加</button>



<ul>
    <li ng-repeat="item in vm.listItem" ng-click="vm.itemClickHandler($event)">{{item}}</li>
</ul>

C'est une idée. Il y a trop de facteurs variables dans la réalité, il est donc difficile de les élaborer un par un. Les points clés à considérer face à des problèmes similaires sont à peu près les suivants :

1. Parce que je souhaite générer un nombre et un contenu indéfinis d'éléments HTML, j'ai besoin d'une collection (liée dans les deux sens) pour les contenir
2. En même temps, j'ai besoin d'un objet pour enregistrer l'élément en cours de création, et d'une méthode pour enregistrer cet élément dans la collection puis le réinitialiser
   2.1 Bien sûr, je n'ai pas besoin d'un objet, mais je capture la valeur de input une fois ajouté, mais ce n'est pas ainsi qu'angular est écrit, c'est ainsi que jQuery est écrit
3. Ce que je peux déterminer, c'est quelles balises utiliser et quels événements lier, afin que ces éléments puissent être écrits dans le modèle et générés avec le parcours de collection en 1.
4. La chose la plus dégoûtante dans l'exemple ci-dessus est l'utilisation d'objets $event, car cela m'oblige à mélanger du code DOM ou lié à un événement dans controller au lieu de la logique métier. Bien entendu il existe de nombreuses solutions, telles que :
   4.1 Sur la base de 2, je n'utilise pas simplement une chaîne pour enregistrer le contenu texte de l'élément li, mais j'utilise un objet. Par exemple, listItem.text enregistre le contenu du texte, puis génère un listItem.id incrémentiel pour celui-ci une fois ajouté. Cela présente de nombreux avantages. Par exemple, lorsque ng-repeat, vous pouvez utiliser track by et la sortie du modèle de contrôle sera plus flexible. La méthode de traitement des événements liés peut transmettre $event ou item au lieu de <. 🎜>. Attendsitem.id 4.2 Cependant, si la méthode de traitement des événements liés doit faire fonctionner le DOM, il est préférable de l'écrire sous forme de directive, et les données (collection d'éléments de liste) peuvent toujours être conservées dans le contrôleur
   

Answer 2

Pour le HTML inséré dynamiquement, qui contient des paramètres ng, angulairejs ne l'analyse généralement pas deux fois.
Vous pouvez utiliser l'injection de dépendances pour appeler $compile afin de réécrire et de compiler le code local.