ajax - 我如何告诉 AngularJS 我一直在用 jQuery 作弊？

Question

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

如果我通过 AJAX 调用获取此片段，然后将其插入 DOM:

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

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

我如何要求 AngularJS 评估我通过非 Angular 方法强加给 DOM 的内容？

这是一个 fiddle :http://jsfiddle.net/4zRTH/

编辑

@tasseKATT 的回答非常适合简单的表达式，但我在访问 Controller 时遇到了问题。我有一个 NotesController，我正在导入的代码需要访问它。更多类似的内容:

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

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

Answer 1

你需要使用$apply:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

但是在您的示例中，该应用程序甚至没有启动，因此您需要:

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 编译新添加的元素并将它链接到它的范围。调用$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