爲什麼AngularJS不能處理頁面加載後追加到頁面的元素？

Question

說我有看起來像這樣的頁面上的一個區域：

<ul> 
    <li id="li_1" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(1)"> 
     <button id="button_1" ng-click="foobar.doButtonyThings">Weeeeeeee!</button> 
    </li> 
    <li id="li_2" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(2)"> 
     <button id="button_2" ng-click="foobar.doButtonyThings">Weeeeeeee!</button> 
    </li> 
</ul> 

每個列表中的項目需要有與之相關的它自己的對象。

現在，在一些JavaScript文件中說，我想添加另一個列表項目到這個列表。我可以知道列表中的下一個「索引」是3，因此我在javascript中對所有元素進行了更改，然後將其附加到列表中。

這是有效的，並且該元素被追加，並且在附加元素時，它在DOM中的所有HTML看起來都不錯。

<ul> 
    <li id="li_1" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(1)"> 
     <button id="button_1" ng-click="foobar.doButtonyThings(1)">Weeeeeeee!</button> 
    </li> 
    <li id="li_2" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(2)"> 
     <button id="button_2" ng-click="foobar.doButtonyThings(2)">Weeeeeeee!</button> 
    </li> 
    <li id="li_3" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(3)"> 
     <button id="button_3" ng-click="foobar.doButtonyThings(3)">Weeeeeeee!</button> 
    </li> 
</ul> 

我現在面臨的問題是，雖然HTML看起來正確，角度新元素實際上從未被「掛鉤」。換句話說，對附加元素沒有角度的作品。對於前兩個，因爲它們在頁面加載時存在，單擊它們各自的按鈕將調用doButtonyThings（）函數。但對於附加元素，什麼都不會發生。

不幸的是，重構代碼以便在外部JavaScript文件中不會發生附加內容，這並不是我所能控制的，所以我需要弄清楚如何使它以這種方式工作，即使不是最佳實踐。

有沒有額外的步驟，我需要採取「掛鉤」附加元素，使棱角與他們一起工作？

---

編輯：

這裏是正在使用的「行」添加到列表中的邏輯。我在DOM中有一個隱藏的模板列表項，用於追加新的列表項。這是實際的代碼，所以它不會真正與上面的foo欄連接。

注意：這是而不是角控代碼。這是香草的JavaScript。

addLine:function(lineNumber) 
{ 
    var lineTemplate = document.getElementsByClassName('template__line')[0]; 
    var newLine = lineTemplate.cloneNode(true); 

    //replace template sections 
    newLine.className = 'clearfix ng-scope'; 
    newLine.innerHTML = newLine.innerHTML.replace(/__lineNumber__/g, lineNumber.toString()); 
    newLine.style.display = 'block'; 
    document.getElementById('quick-order__body').appendChild(newLine); 
} 

Answer 1

當你添加新的HTML，包括指令（例如，Ng點擊）你需要使用$編譯服務（你將需要注入），使角意識到這一點：

$compile(element.contents())(scope); 

我們需要一些JavaScript代碼來繼續爲您提供一個更具體的示例以供您使用。這可能是因爲你使用ng-repeat迭代數組來更好地吐出你的html。這樣當數組通過添加/刪除被更改時，html將自動更新。