国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

angular.js - AngularJS如何加入的DOM元素且能綁定事件
曾經(jīng)蠟筆沒有小新
曾經(jīng)蠟筆沒有小新 2017-05-15 16:53:10
0
2
753

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

曾經(jīng)蠟筆沒有小新
曾經(jīng)蠟筆沒有小新

全部回覆(2)
漂亮男人

其實這是一個可能會變得很複雜的問題,現(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)實中的可變因素太多了,不好一一展開細說。處理類似的問題要考慮的關鍵點差不多就是以下:

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

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

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板