AngularJS犯規「引導」新的DOM元素

我有一個AngularJS應用程序，它（減少到相關部分）如下：AngularJS犯規「引導」新的DOM元素

<div ng-app="myModule"> 
    <div id='container'> 
     <div say-hello-to name="Frank">f</div> 
     <div say-hello-to name="Billy">b</div> 
    </div> 
</div>

的應用程序工作正常。現在，如果在角引導過程之後，我添加了一個新的dom元素，它對應於一個指令，它不被解釋。請注意，「添加」由非angularjs JavaScript代碼完成。

<div say-hello-to name="Dusty">d</div>

它只是「死」的div。

的jsfiddle鏈接：http://jsfiddle.net/Nn34X/

的問題是：我如何添加一個新的DOM元素到應用程序，讓AngularJS知道有一個新的元素來解釋（我可以輕易地精確指向angularjs所有插入元素）

乾杯，並提前感謝！

來源

2014-04-16 iPirat

你必須在非角的js代碼添加這些元素？ –

如果你正在用jQuery添加元素，你需要先編譯它 – doodeec

@OmriAharon：是的，它需要是非角度代碼 – iPirat

檢索$injector服務：

var $injector = angular.element(document.querySelector('#container')).injector();

選擇元素：

var element = angular.element(document.querySelector('[name="Dusty"]'));

使用$注射器服務檢索$compile服務和元素鏈接到的範圍：

$injector.invoke(function ($compile) {  
    var scope = element.scope(); 
    $compile(element)(scope); 
});

演示：http://jsfiddle.net/6n7xk/

簡短說明：Call Angular JS from legacy code

來源

2014-04-16 11:15:35 tasseKATT

完美解決方案。謝謝！ – iPirat

作爲後續工作：如果使用非角度代碼去除這樣一個元素，是否足夠執行'angular.element（...）。scope（）。$ destroy（）'還是還有其他要考慮的事情？ – iPirat

AngularJS犯規「引導」新的DOM元素

回答

相關問題