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

前端之家收集整理的这篇文章主要介绍了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>';
            }
        };
});

猜你在找的JavaScript相关文章