访问模板内的angular directive(element)文本

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