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

Question

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

Answer 1

Sebenarnya ini adalah masalah yang mungkin menjadi sangat rumit Terdapat banyak penyelesaian dalam realiti saya akan menulis rujukan yang paling mudah:

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

Kemudian dalam templat yang sepadan:

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>

Ini adalah idea Terdapat terlalu banyak faktor pembolehubah dalam realiti, jadi sukar untuk menghuraikannya satu demi satu. Perkara utama yang perlu dipertimbangkan semasa menangani masalah yang sama adalah seperti berikut:

1. Oleh kerana saya ingin menjana nombor dan kandungan elemen HTML yang tidak ditentukan, saya memerlukan koleksi (terikat dua hala) untuk menyimpannya
2. Pada masa yang sama, saya memerlukan objek untuk menyimpan item yang sedang dibuat dan kaedah untuk menyimpan item ke koleksi dan kemudian menetapkan semula
   2.1 Sudah tentu, saya tidak memerlukan objek, tetapi tangkap nilai input apabila ditambah, tetapi ini bukan cara sudut ditulis, ini adalah cara jQuery ditulis
3. Apa yang boleh saya tentukan ialah teg apa yang hendak digunakan dan acara apa yang perlu diikat, jadi perkara ini boleh ditulis dalam templat dan dijana dengan traversal koleksi dalam 1.
4. Perkara yang paling menjijikkan tentang contoh di atas ialah penggunaan $event objek, kerana ia membuatkan saya terpaksa mencampurkan DOM atau kod berkaitan Acara dalam controller dan bukannya logik perniagaan. Sudah tentu terdapat banyak penyelesaian, seperti:
   4.1 Berdasarkan 2, saya tidak hanya menggunakan rentetan untuk menyimpan kandungan teks item li, tetapi menggunakan objek. Contohnya, listItem.text menyimpan kandungan teks, dan kemudian menjana kenaikan listItem.id untuk kandungan teks itu apabila ditambahkan. Terdapat banyak kelebihan untuk melakukan ini. Contohnya, apabila ng-repeat, anda boleh menggunakan track by dan output templat kawalan akan menjadi lebih fleksibel Kaedah pemprosesan peristiwa terikat boleh melepasi $event atau item dan bukannya item.id. Tunggu
   4.2 Walau bagaimanapun, jika kaedah pemprosesan peristiwa terikat perlu mengendalikan DOM, sebaiknya tuliskannya sebagai arahan dan data (pengumpulan item senarai) masih boleh disimpan dalam pengawal

Answer 2

Untuk HTML yang dimasukkan secara dinamik, yang mengandungi parameter ng, angularjs biasanya tidak menghuraikannya dua kali.
Anda boleh menggunakan suntikan kebergantungan untuk memanggil $compile untuk menulis semula dan menyusun kod tempatan.