javascript - 加载 HTML 后编译 JS 指令

Question

所以我想在加载 HTML 后编译一个指令。

var gifApp = angular.module('gifApp', []);

gifApp.directive('addition', function() {
  return function(scope, element) {
    element.html("<h1>" + scope.gif.name + "</h1>")

  }
});

function MainCtrl ($scope) {
  $scope.gif = {name: "Cat jumps on car"}

  $scope.push_code = function() {
    $("body").html("<div addition></div>")
  }
}

每当函数 push_code 被调用时，gif 名称就不会显示在屏幕上。窗口完成加载指令后是否无法编译代码？如果可能，我该如何解决？

Answer 1

您可以在窗口加载后添加 HTML，但 Angular 需要知道您何时这样做。现在，由于您正在使用 jQuery 添加 div，因此 Angular 不知道 DOM 已更改。因此它没有机会将您的指令应用于您的新元素。

我推荐的处理方式是使用 Angular 内置的 jQuery 版本 jQlite .

这是使用 jQlite 的 push_code() 版本:

push_code = function() {
   compiled = $compile('<div addition></div>')($scope);
   angular.element(document).find('body').append(compiled)
}

在这里，我们创建了一个 Angular DOM 元素，并告诉 Angular 在当前范围内 $compile 它(这将应用您的指令)。然后我们将该 Angular 元素添加到与您的 jQuery 方法等效的 jQlite 中的 body。

这是一个演示:http://jsfiddle.net/Me2HW/3/

我将 push_code() 调用放在 $timeout 中只是为了证明这里没有时间依赖性。您可以随时进行此调用，包括在窗口已加载并且可以正常工作之后。