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元素

回答

相关问题