多个指令附加相同的元素 [英] Multiple directives appending the same element
问题描述
我正在尝试将一组指令附加到相同的DOM元素上，例如
I'm trying to have a group of directives append to the same DOM element something like this
角度HTML
<div one two></div>
并且HTML结果是这样的
and the HTML result to be something like this
<div one two>
<h1>one</h1><!--this one added by the 'one' directive-->
<h2>two</h2><!--this one added by the 'one' directive-->
</div>
我不确定如何通过指令完成此操作，而无需使用Jquery进行追加
I'm not sure how is this done with directives without the need to append using Jquery
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
}).
directive('one',function(){return{restrict:'A',template:'<h1>one</h1>'};}).
directive('two',function(){return{restrict:'A',template:'<h2>two</h2>'};})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div one two></div>
</body>
</html>推荐答案
您不能仅凭模板参数来完成您想做的事情.template参数只是在指令编译功能中执行类似于以下操作的简写:
You can't do what you want with the template parameter alone. The template parameter is just shorthand for doing something similar to the following in your directive compile function:
compile: function(element, attr) {
element.empty();
element.append(template);
}
如果您在指令中包含模板属性，则会自动发生.如果要覆盖此行为，而仅使指令附加内容(不清空它)，则只需简单地保留template属性.因此，您的两个指令将是:
If you include a template property on your directive, this will happen automatically. If you want to override this behavior, and just have the directive append the content (without emptying it), you need to simply leave off the template property. So your two directives would be:
.directive('one', function() {
return {
compile: function(element, attr) {
element.append('<h1>one</h1>');
}
};
})
.directive('two', function() {
return {
compile: function(element, attr) {
element.append('<h1>two</h1>');
}
};
});
您可以在此Plunk
我还提供了一个使用文件中模板的版本.这里唯一的陷阱是，以这种方式加载模板需要使用链接.
I've also included a version that uses a template from a file. The only gotcha here is that loading a template in this way requires using link.
.directive('three', function($http, $compile, $templateCache) {
return {
link: function(scope, element, attr) {
$http.get('template.html', {cache: $templateCache}).then(function(result){
element.append($compile(result.data)(scope));
});
}
};
});
并且这是使用链接的版本.
.directive('one', function($compile) {
return {
link: function(scope, element, attr) {
element.append($compile('<h1>one</h1>')(scope));
}
};
})
.directive('two', function($compile) {
return {
link: function(scope, element, attr) {
element.append($compile('<h1>two</h1>')(scope));
}
};
});
您可能会注意到，输出是向后的.似乎一个"被附加在两个"之后，即使它在标记中排在第一位.如果我们添加了远程版本，则无论何时远程提供模板，该版本都可以使用，但是从$ templateCache传递模板时，它也将向后提供.
One think you'll notice is that the output is backwards. It seems "one" gets appended after "two", even though it comes first in the markup. If we added the remote version, it would work whenever the template was served remotely, but when it was delivered from the $templateCache it would also be backward.
原因是它们都具有相同的优先级，并且以与编译相反的顺序调用链接".要解决此问题，您可以简单地将优先级设置为低一点(以便最后编译，但首先链接).
The reason is they all have the same priority, and "link" is called in the reverse order as compile. To fix, you can simple set the priority of one a little lower (so it get's compiled last, but linked first).
此处优先处理此问题的Plunk .
这篇关于多个指令附加相同的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
