所以我关注自定义组件this EggHead.io tutorial,我遇到了这个问题。声明指令时如:
angular.module('myApp', [])
.directive('myDir', function(){
return {
restrict: "E",
controller: "myController",
link: function(scope, element, attrs) {
scope.foo = element.text();
},
templateUrl: "myDirTemplate.html"
}
});
和模板:
<div>The value is: {{foo}}</div>
和正在使用的指令如下:
<html>
...
<myDir>Bar</myDir>
...
</html>
链接功能中的元素是指
<div>The value is: {{foo}}</div>
在模板中。如果我没有指定 templateUrl ,那么元素指的是
<myDir>Bar</myDir>
在主视图中,这就是我想要的。我希望该指令采用“Bar”文本并将其插入{{foo}},最终结果如下:
<div>The value is: Bar</div>
但我不知道如何绕过每次角度选择模板的元素。
有什么想法吗?
答案 0 :(得分:22)
您需要使用ngTransclude:
app.directive('myDir', function(){
return {
restrict: "E",
transclude: true,
templateUrl: "myDirTemplate.html",
replace: true
}
});
然后您的外部模板变得类似于:
<div>The value is: <span ng-transclude></span></div>