我有一个模板文件 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/