Question

我有这样简单的指示：

app.directive('sample',function(){
 return{
           restrict:'E',
    template:'<a href="#">Hello sample</a>',
    templateUrl:''
 }
});

我希望用户在标签中声明templateUrl，如下所示：

<sample template="some url"></sample>

使用templateUrl但如果没有设置，则在指令

中使用默认模板

Answer 1

template和templateUrl可以指定为带有两个参数的函数 - tElement和tAttrs。

一种简单的方法是移动默认模板并在templateUrl函数中执行逻辑：

app.directive("sample", [
  function() {

    var defaultTemplate = 'default.html';

    return {
      restrict: 'E',
      templateUrl: function (tElement, tAttrs) {
        return tAttrs.template || defaultTemplate;
      }
    }
  }
]);

演示：http://plnkr.co/edit/rrPicuzzb6YF4Z6yh3Rn?p=preview

Answer 2

我建议使用transclude：

app.directive('sample',function(){
    return {
       restrict:'E',
       transclude: true,
       template:'<a href="#">Hello sample <div ng-transclude></div></a>
    };
});

HTML

<sample>
    <div ng-include="some url"></div>
</sample>

根据用户输入在Angular Directive中设置模板或templateUrl

2 个答案: