通过在Angularjs中使用attrs来动态模板

Question

我们目前正在使用标有＃2 的代码，但希望使用标有＃1 的代码，并希望确认是否存在任何负面影响或问题

// #1
<my-thumb my-type="'type01'"></my-thumb>
=> templateUrl: 'components/thumb.type01.tpl.html'


In Controller
=> this.type = 'type02';

<my-thumb my-type="type"></my-thumb>
=> templateUrl: 'components/thumb.type02.tpl.html'

// --------------------------------------------------------------------------

// #2
link: function(scope, elem, attrs) {
  $templateRequest('components/thumb/thumb.' + (scope.type || 'file') + '.tpl.html')
    .then(function (html) {
      elem.append($compile(angular.element(html))(scope));
      _link (scope, elem, attrs);
    });
}
...
function _link (scope, elem, attrs) { ... }

我们不想使用＆＃39; ng-include＆＃39;因为没有意义的标签。

ex) 
<my-thumb my-type="type">
  <div ng-include="components/thumb.type01.tpl.html">
    ...
  </div>
</my-thumb>

Answer 1

您可以在templateUrl上添加条件，如下所示：

app.directive('myThumb', function() {
    return {
      restrict: 'E',
      templateUrl: function(elem, attrs) {
        if (attrs.type === 'type01') {
          return 'components/thumb.type01.tpl.html';
        } else if (attrs.type === 'type02'){
          return 'components/thumb.type02.tpl.html';
        }
      },
      ...
    };
  });