如何讓Angular指令在添加到Angular之外的dom時渲染？

如何讓Angular指令在添加到Angular之外的dom時渲染？如何讓Angular指令在添加到Angular之外的dom時渲染？

我正在慢慢地將角度引入到現有的代碼庫中。在dom中有一堆表中有一堆行。每一行包含一個微調元素，它是由一個指令控制：

<tr> 
    <td>stuff</td> 
    <td><div spinner></div></td> 
<tr> 

joyableApp.directive('spinner', [function() { 
    return { 
    templateUrl: 'spinner.html', 
    } 
}]);

NOW-當<div spinner>是在頁面加載的DOM，微調指令正確激活和spinner.html模板被正確地呈現該專區內。

但是，這個頁面上有一個按鈕，它會在表格中增加額外的行。管理該按鈕查詢：

$(「#new-row-button」).click(function(e) { 
    $.get(「/get_new_row_content」, function(data) { 
    $(「#table tbody」).append(data); 
    }); 
});

的HTML代碼返回/get_new_row_content是非常簡單，只是上面顯示的HTML，幷包含<div spinner>。 Dom檢查驗證是否將Spinner元素添加到頁面中。但是，spinner.html模板未呈現。添加此新行時，spinner指令不會被觸發。

注意這jQuery代碼是不是在任何控制器，服務，工廠，或任何其他角度的東西。

那麼，如何獲取角度指令來拾取新行？

我懷疑正確的答案是使整個頁面被角度控制，包括'添加行'按鈕，但我沒有時間這樣做。我需要一個角度和現有代碼之間的短期橋樑。

TLDR：我該如何獲得一個角度指令來觸發一個dom元素，該角色動態地從角度外的頁面？

來源

2014-12-04 Fishtoaster

您應該使用$ compile（'your html'）（scope）並將其附加到您的表中。我認爲 – 2014-12-04 22:41:03

如何獲得角度外的'$ compile'（即在該jquery ajax回調中）？ – Fishtoaster 2014-12-04 22:44:35

var $ injector = angular.injector（['ng']）;然後$ injector.invoke（函數（$ rootScope，$ compile）{ //編譯並注入這裏 }）; – 2014-12-04 22:57:06

你必須使用$編譯服務，然後注入的結果到您的網頁：

$(「#new-row-button」).click(function(e) { 
    $.get(「/get_new_row_content」, function(data) { 
    var $injector = angular.injector(['ng','any other needed modules']); 
    $injector.invoke(function($rootScope,$compile){ 
     $(「#table tbody」).append($compile(data)($rootScope)); 
    }); 
    }); 
});

來源

2014-12-04 23:25:39

總是針對$ rootScope構建可能不會給出預期的結果，應該使用用於添加元素的元素的範圍。 – Enzey 2014-12-04 23:39:17

不要創建噴射器的另一個實例。當應用程序按角度加載時，它已經爲您創建，使用該應用程序。查看我的帖子，瞭解如何從角元素訪問它。然後你也不需要擔心依賴模塊，因爲它包含了從ng-app引入的所有模塊。 – Enzey 2014-12-04 23:41:03

做正確的事是有有NG重複。

<tr ng-repeat="rowData in allRowData">

該按鈕然後可以有一個ng-click，將新數據添加到allRowData數組。並更新以顯示您想要在rowData中看到的數據。

以上將是實現您使用角度的正確方法。忽略該建議可以即時構建和添加內容，您可以在角度外執行以下操作。

var elem = angular.element(jQuery(「#table tbody」)); 
elem.injector().invoke(function($compile){ 
    elem.append($compile(html)(elem.scope())); 
})

來源

2014-12-04 23:37:57 Enzey

如何讓Angular指令在添加到Angular之外的dom時渲染？

回答

相關問題