ajax – 我怎么告诉AngularJS我一直在用jQuery欺骗它？

我正在使用预制模板将管理界面混淆在一起.已构建的导航系统使用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/

解决方法

你需要使用$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