所以让我们在我的
HTML中说我有这样的东西：
<tabcontent></tabcontent>
那么这个指令的javascript就是这样的：
tabsApp.directive('tabcontent',function(){
var myObj = {
priority:0,template:'<div></div>',replace: true,controller: 'TabCtrl',transclude: false,restrict: 'E',scope: false,compile: function (element,attrs){
return function (parentScope,instanceEle){
parentScope.$watch('type',function(val) {
element.html('<div '+val+'></div>');
});
}
$compile(parentScope);
},link: function postLink(scope,iElement,iAttrs){}
};
return myObj;
});
HTML被正确解析,类型的值在控制器JS中找到.
so <tabcontent></tabcontent> is replaced with <div recipe></div> for example..
(那部分确实发生了)
所以我也有一个配方的指令：
tabsApp.directive('recipe',template:'<div>TESTING</div>',attrs){
return {
pre: function preLink(scope,iAttrs,controller){},post: function postLink(scope,controller){}
}
},iAttrs){}
};
return myObj;
});
这显然很简单,只是为了测试.但是配方指令没有被处理…
这里发生了什么？
解决方法
你需要改变2件事情：
>配方指令不能限于E(元素).如果要生成< div recipe>< / div>之类的指令,则至少必须在指令配置上的restrict属性中添加A(属性)：
app.directive('recipe',function() {
return {
restrict: 'E',...
>您需要在’watch’之后编译tabcontent指令的HTML内容：
app.directive('tabcontent',function($compile){
return {
...
link: function (scope,iAttrs) {
scope.$watch('type',function(val) {
iElement.html('<div '+val+'></div>');
$compile(iElement.contents())(scope);
});
}
...
jsFiddle：http://jsfiddle.net/bmleite/n2BXp/