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

Question

輸入文字框，在生成li元素，且li元素能綁定事件

Answer 1

其實這是一個可能會變得很複雜的問題，現實中有很多種解法，我會寫一個最簡單的參考給你：

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
        // ...
    }
}

接著在對應的模版裡：

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>

這就是個思路，現實中的可變因素太多了，不好一一展開細說。處理類似的問題要考慮的關鍵點差不多就是以下：

1. 因為我要產生不確定數量和內容的 HTML 元素，所以我需要一個（雙向綁定的）集合來保存它們
2. 同時我需要一個物件來保存目前正在建立的項，還需要一個方法用於把這個項保存到集合裡然後重置它
   2.1 當然我也可以不需要一個對象，而是捕捉添加時 input 的值，但這不是 angular 的寫法，這是 jQuery 的寫法
3. 我能確定的是用什麼標籤，綁定什麼事件，所以這些東西寫在模版裡，配合 1 裡的集合遍歷生成就好了。
4. 上面那個範例最噁心之處在於借助了 $event 的对象，因为它使得我必须在 controller 混入和 DOM 或 Event 相關的程式碼而不是業務邏輯。當然也有很多解決方法，例如：
   4.1 在 2 的基礎上，我不單純地用一個字串保存 li 項的文字內容，而是用一個物件。例如 listItem.text 保存文字内容，然后在添加的时候给它生成一个递增的 listItem.id。这样做有很多好处，比如说 ng-repeat 的时候可以 track by，控制模版输出也会更灵活，绑定的事件处理方法可以不传 $event 而是传 item 或 item.id 都可以等等
   4.2 然而如果綁定的事件處理方法要操作 DOM 的話，最好還是寫成 directive，資料（列表項集合）還是保留在 controller 裡即可

Answer 2

對於動態插入的html，裡面有ng參數，angularjs一般是不會二次解析的。
可以利用依賴注入呼叫$compile重寫編譯局部程式碼。