輸入文字框,在生成li元素,且li元素能綁定事件
其實這是一個可能會變得很複雜的問題,現(xiàn)實中有很多種解法,我會寫一個最簡單的參考給你:
javascript
// 在某一個 controller 里: function DemoController() { var vm = this // 用了 "controller as" 語法的時候會這樣寫,vm 代表 viewModel vm.listItems = [] // 初始化一個數(shù)組用于保存將要生成的 li vm.listItem = '' // 用于綁定 input;不聲明其實也可以,這里是為了讓你看清楚 // 綁定在 input 上的方法,把新的 listItem 加入數(shù)組,然后重置它 vm.addItem = function() { vm.listItems.push(vm.listItem) vm.listItem = '' } // 綁定在 li 上的方法,接受 $event 參數(shù),你可以利用它獲取當前被點擊的 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>
這就是個思路,現(xiàn)實中的可變因素太多了,不好一一展開細說。處理類似的問題要考慮的關鍵點差不多就是以下:
input
的值,但這不是 angular 的寫法,這是 jQuery 的寫法$event
的對象,因為它使得我必須在 controller
混入和 DOM 或 Event 相關的程式碼而不是業(yè)務邏輯。當然也有很多解決方法,例如:listItem.text
保存文字內容,然后在添加的時候給它生成一個遞增的 listItem.id
。這樣做有很多好處,比如說 ng-repeat
的時候可以 track by
,控制模版輸出也會更靈活,綁定的事件處理方法可以不傳 $event
而是傳 item
或 item.id
都可以等等對於動態(tài)插入的html,裡面有ng參數(shù),angularjs一般是不會二次解析的。
可以利用依賴注入呼叫$compile重寫編譯局部程式碼。