javascript – 访问模板中的角度指令(元素)的文本

所以我关注了自定义组件的 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>

但是我不知道如何在每个角度选择模板的元素.

有任何想法吗?

解决方法

您需要使用 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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...