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 Angular添加div，所以不知道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在当前作用域上编译它（它将应用你的指令）。然后我们在jQuery方法的jQlite等效项中将Angular元素添加到body。

以下是演示：http://jsfiddle.net/Me2HW/3/

我将push_code()调用放在$timeout内只是为了证明此处没有时间依赖性。你可以随时拨打这个电话，包括窗口加载后，它可以正常工作。

加载HTML后编译JS指令

1 个答案: