angular.js - How to add DOM elements in AngularJS and bind events

Question

Input text box, generate li element, and li element can bind events

Answer 1

In fact, this is a problem that may become very complicated. In reality, there are many solutions. I will write you the simplest reference:

<code>javascript</code><code>// 在某一个 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
        // ...
    }
}
</code>

Then in the corresponding template:

<code>html</code><code><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>


</code>

This is an idea. There are too many variable factors in reality, so it’s hard to go into details one by one. The key points to consider when dealing with similar problems are pretty much the following:

1. Because I want to generate an undefined number and content of HTML elements, I need a (two-way bound) collection to hold them
2. At the same time, I need an object to save the item currently being created, and a method to save the item into the collection and then reset it
   2.1 Of course, I don’t need an object, but capture the value of input when added, but this is not the way of writing in angular, this is the way of writing in jQuery
3. What I can determine is what tags to use and what events to bind, so these things can be written in the template and generated with the collection traversal in 1.
4. The most disgusting thing about the above example is that it uses $event 的对象，因为它使得我必须在 controller to mix in code related to DOM or Event instead of business logic. Of course there are many solutions, such as:
   4.1 On the basis of 2, I do not simply use a string to save the text content of the li item, but use an object. For example listItem.text 保存文字内容，然后在添加的时候给它生成一个递增的 listItem.id。这样做有很多好处，比如说 ng-repeat 的时候可以 track by，控制模版输出也会更灵活，绑定的事件处理方法可以不传 $event 而是传 item 或 item.id you can wait
   4.2 However, if the bound event processing method needs to operate the DOM, it is best to write it as a directive, and the data (collection of list items) can still be kept in the controller

Answer 2

For dynamically inserted HTML, which contains ng parameters, angularjs generally does not parse it twice.
You can use dependency injection to call $compile to rewrite and compile local code.