Question

我正在使用预制模板将管理界面混淆在一起。已构建的导航系统使用jQuery通过基于window.location.hash的AJAX将内容加载到标记中。

如果我通过AJAX调用获取此剪辑，然后将其插入DOM：

<div ng-app="myApp">
    {{ 2 + 2 }}
</div>

AngularJS不知道我已经更新了DOM。我看到的内容实际上是{{ 2 + 2 }}。如果我重新加载页面，表达式会计算，我会看到我想要的值4。

我如何要求AngularJS评估我通过非Angularian方法粗暴强迫DOM的内容？

这是一个小提琴：http://jsfiddle.net/4zRTH/

修改

@tasseKATT的答案非常适合简单的表达式，但我无法访问控制器。我有一个NotesController我要导入的代码需要访问。更多的东西：

<div ng-controller="NotesController">
    {{ notes.length }}
</div>

我更新了小提琴，所以它更符合我要做的事情：http://jsfiddle.net/5Xhs9/4/

Answer 1

您需要使用$apply：

$ apply（）用于从外部执行角度表达式角度框架。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库）。因为我们正在呼唤我们需要执行适当范围生命周期的角度框架异常处理，执行手表。

在您的示例中，应用程序甚至没有自举，因此您需要：

1）选择元素：

var dynamicContent = "<div id='someId' ng-app> {{ 2 + 2 }} </div>";
$('.expression').html(dynamicContent);

var element = angular.element(document.querySelector('#someId'));

2）引导它：

angular.bootstrap(element, []);

3）检索范围：

var elementScope = element.scope();

4）致电$ apply：

elementScope.$apply();

演示：http://jsfiddle.net/5Xhs9/

编辑新方案：

在您的新示例中，您已将ng-app"myApp"添加到现有div，因此AngularJS将为您启动应用程序，现在您想要动态添加此内容：

<div id='notes' ng-controller='NotesController'> {{ notes.length }} </div>

您已经定义了NotesController并将其添加到模块中。你现在可以做的是：

1）检索$injector服务：

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

2）使用$injector编译新添加的元素并将其链接到scope。致电$apply：

var element = angular.element(document.querySelector('#notes'));

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

演示：http://plnkr.co/edit/P6VwLee6AUWO7aDT601m?p=preview

Answer 2

您可以<{1}} $compile函数$rootScope保存app.run和window 作弊：http://plnkr.co/edit/pxGhof1zD0rZknagfmyc?p=preview

window.compileForAngular = null;
window.rootScope = null;

var app = angular.module('jQuery', []);
app.run(function ($compile, $rootScope) {
    window.rootScope = $rootScope;
    window.compileForAngular = $compile;
    doNotTryThisAtHome();
});

function doNotTryThisAtHome() {
    // let's just pretend that this came in over an AJAX request
var dynamicContent = "<div> {{ 2 + 2 }} </div>";

// I insert it into the DOM via jQuery
$('.expression').html(window.compileForAngular(dynamicContent)(window.rootScope));

}

Answer 3

http://jsfiddle.net/QC97L/2/

见上面的小提琴

// Code goes here
jQuery(document).ready(function () {
// let's just pretend that this came in over an AJAX request
var dynamicContent = "<div id='mainApp' > {{ 2 + 2 }}  </div>";

// I insert it into the DOM via jQuery
$('.expression').html(dynamicContent);





  var app = angular.module('myApp',[])
   angular.bootstrap('#mainApp',['myApp']);

// now how do I get AngularJS to evalulate the expression?

});

我怎么告诉AngularJS我用jQuery欺骗它？

3 个答案: