gpt4 book ai didi

javascript - 加载 HTML 后编译 JS 指令

转载 作者:行者123 更新时间:2023-11-30 10:24:57 25 4
gpt4 key购买 nike

所以我想在加载 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 名称就不会显示在屏幕上。窗口完成加载指令后是否无法编译代码?如果可能,我该如何解决?

最佳答案

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

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

这是使用 jQlitepush_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 中只是为了证明这里没有时间依赖性。您可以随时进行此调用,包括在窗口已加载并且可以正常工作之后。

关于javascript - 加载 HTML 后编译 JS 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20061111/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com