javascript - 在模板中访问 Angular Directive(指令)(元素)的文本

标签 javascript angularjs angularjs-directive

所以我关注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,则 element 指的是

<myDir>Bar</myDir> 

在主视图中,这就是我想要的。我希望该指令将“Bar”文本插入到 {{foo}} 中,给出最终结果:

<div>The value is: Bar</div> 

但我不知道如何绕过每次选择模板元素的 Angular 。

有什么想法吗?

最佳答案

您需要使用 ngTransclude :

app.directive('myDir', function(){
  return {
    restrict: "E",
    transclude: true,
    templateUrl: "myDirTemplate.html",
    replace: true
  }
});

然后你的外部模板变成类似于:

<div>The value is: <span ng-transclude></span></div>

查看此处的代码:http://plnkr.co/edit/EuT5UlgyxgM8d54pTpOr?p=preview

关于javascript - 在模板中访问 Angular Directive(指令)(元素)的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16115238/

相关文章:

javascript - ng-transclude 在模板 AngularJS 中不起作用

javascript - 有什么方法可以知道点击是来自 "trigger"还是实际点击?

angularjs - AngularJS 指令前链接和后链接功能可以自定义吗?

javascript - 具有绝对位置的图像上的背景图像

javascript - $location.search 前面是哈希 URL 时为空

javascript - Angular 1.6 绑定(bind)到 Controller

javascript - 使用 Angular 的 $http 通过 GET 请求将对象数组发送到 Java Spring

javascript - 如何在 angularjs 中使用 HTML5 地理定位

javascript - 我可以从 mocha/phantomjs 单元测试中获取页面截图吗?

javascript - Backbone.js:如何将挂起的同步事件排队到服务器?