Rex*_*x T 9 javascript angularjs angularjs-directive
所以我正在关注自定义组件的这个EggHead.io教程,我遇到了这个问题.在声明指令时,例如:
angular.module('myApp', [])
.directive('myDir', function(){
return {
restrict: "E",
controller: "myController",
link: function(scope, element, attrs) {
scope.foo = element.text();
},
templateUrl: "myDirTemplate.html"
}
});
Run Code Online (Sandbox Code Playgroud)
和模板是:
<div>The value is: {{foo}}</div>
Run Code Online (Sandbox Code Playgroud)
以及使用的指令如下:
<html>
...
<myDir>Bar</myDir>
...
</html>
Run Code Online (Sandbox Code Playgroud)
元件在链接功能指
<div>The value is: {{foo}}</div>
Run Code Online (Sandbox Code Playgroud)
在模板中.如果我没有指定templateUrl,那么element指的是
<myDir>Bar</myDir>
Run Code Online (Sandbox Code Playgroud)
在主视图中,这就是我想要的.我希望该指令采用"Bar"文本并将其插入{{foo}},给出最终结果:
<div>The value is: Bar</div>
Run Code Online (Sandbox Code Playgroud)
但我不知道如何绕过每次角度选择模板的元素.
有任何想法吗?
Jay*_*com 22
您需要使用ngTransclude:
app.directive('myDir', function(){
return {
restrict: "E",
transclude: true,
templateUrl: "myDirTemplate.html",
replace: true
}
});
Run Code Online (Sandbox Code Playgroud)
然后你的外部模板变成类似于:
<div>The value is: <span ng-transclude></span></div>
Run Code Online (Sandbox Code Playgroud)
查看以下代码:http://plnkr.co/edit/EuT5UlgyxgM8d54pTpOr?p = preview
| 归档时间: |
|
| 查看次数: |
10178 次 |
| 最近记录: |