javascript – Directive的模板没有获得由compile设置的值

请看这 Plunker

我有一个使用自定义角度指令的HTML

<body ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div><sample attributeone="Sample Attribute"></sample></div>
  </body>

我的指令看起来像这样:

myApp.directive('sample',function() {
    var value = "";
        return {
            replace: true,restrict: 'E',scope : false,template: '<div>This is a sample Paragraph '+ value + '</div>',compile: function ( tElement,tAttributes ) {
              return {
                  pre: function preLink( scope,element,attributes ) {
                      console.log( attributes.log + ' (pre-link)'  );
                      value = tAttributes.attributeone;
                  }
              };
         }
        };
});

在我看来,编译前应该执行bofore返回模板,值应该设置为“Sample Attribute”.但它没有得到评估.

预期产出

This is a sample Paragraph Sample Attribute

实际产出

This is a sample Paragraph

有没有其他方法可以在模板中设置值?

解决方法

如果您只想附加值,那么为什么不将您的模板用作函数

请参阅此更新的Plunker

myApp.directive('sample',template: function(ele,attr,ctrl) {
              value = attr.attributeone;
              return '<div>This is a sample Paragraph ' + value + '</div>';
            }
        };
});

相关文章

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