javascript - 将 $compile 和 $scope 应用于移入 ng-view 元素的外部 div 文本

Question

我有一个div我附加到 ng-view 中的元素之一的元素DOM 树。 div包含我想在当前 $scope 中评估的文本元素ng-view的树。如何让 Angular 重新评估该范围内的附加元素？

div元素最初存在于文档的单独部分中，在 ng-view 之外。元素，看起来像这样:

<div id="eventInfo">
  The event takes place at {{eventModel.startTime}}.
</div>

我需要eventModel.startTime相对于 ng-view 内的元素范围进行绑定(bind)的表达式我将其移入其中，其范围包含 eventModel 的正确实例对象。

我认为我需要按照以下方式做一些事情:

targetDiv.appendChild(eventInfo);      // Move event text into target element
var scope = angular.element(targetDiv).scope();    // Get target scope
angular.$compile(eventInfo)(scope);    // (?) Apply target scope to event text

问题出在最后一行。该 JS 代码不在 Angular Controller 内，那么我如何访问 $compile ？

(我已经查看了问题“Bind an externally loaded DOM element to Angular's scope ”，但它没有回答我的问题。)

Answer 1

您需要从应用 injector 获取 $compile 服务.

假设您的 ng-app 位于 html 级别，或者您使用文档作为 rootElement 手动引导应用程序(否则选择哪个是根元素而不是文档):

var $compile = angular.element(document).injector().get('$compile');
$compile(eventInfo)(scope);
scope.$apply();