gpt4 book ai didi

angularjs - 将元素从模板文件添加到 dom 的属性指令

转载 作者:行者123 更新时间:2023-12-04 12:06:56 25 4
gpt4 key购买 nike

我有一个模板文件 myfile.html,我正在用 Angular 编写一个属性指令,该指令的目的是在声明指令属性的元素之后插入 myfile.html 中的元素。例如:将在该 div 之后插入 myfile.html 的所有内容。

我试着这样做:

app.directive('myAngularDirective', function () {
return {
restrict: "A",
link: function(scope, element){
var addMe = angular.element("myfile.html");
element.after($copile(addMe));
scope.$apply();
}
}
});
<h1>myfile.html</h1>
<div ng-controller="myController">
<div ng-click=clickMe()></div>
</div>

<h1>my home page</h1>
<div my-angular-directive></div>

但是没有任何反应,myfile.html 的内容没有添加到主页。

如果我像这样在 after 函数中编写纯 html:元素.after("")

它确实被添加到 dom 但 angular 不消化它,并且 ng-click 不工作。

感谢您的帮助。

最佳答案

$compile("<html here>")返回一个模板函数,该函数期望在返回 DOM 之前传递范围。将您的代码更改为以下内容,它应该会按预期工作:

app.directive('myAngularDirective', function($compile) {
return {
restrict: "A",
link: function(scope, element){
var addMe = angular.element("<div>Hello World</div>");
element.after($compile(addMe)(scope));
scope.$apply();
}
}
});

如果要从外部 URL 加载模板。您需要执行模板请求。

app.directive('myAngularDirective', function($compile,$templateRequest) {
return {
restrict: "A",
link: function(scope, element){
$templateRequest('index.html').then(function(tpl){
var addMe = angular.element(tpl);
element.after($compile(addMe)(scope));
scope.$apply();
});
}
}
});

关于angularjs - 将元素从模板文件添加到 dom 的属性指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33230599/

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