Question

我正在编写一个指令，根据提供的属性获取模板。

JS

var app = angular.module('app', []);

app.directive('sample', function($compile){
  var a = '<div>template 1</div>';
  var b = '<div>template 2</div>';

  return {
    replace: true,
    restrict: 'E',
    scope: {
      type: '@'
    },
    link: function($scope, $element){
      var get_template = function(){
          if($scope.type == 'others'){
              return b;
          } else {
              return a;
          }
      };

      $($element).html(get_template()).show();
      $compile($($element).contents())($scope);
    }
  }
});

HTML

<sample></sample>
<sample type="others"></sample>

这里replace: true在我们在指令中提供模板属性时起作用。有没有办法摆脱<sample />标签，只有<div />。

还有另一种方法，

app.directive('sample', function($compile, $templateCache){
  var a = '<div>template 1</div>';
  var b = '<div>template 2</div>';

  $templateCache.put('template1.html', a);
  $templateCache.put('template2.html', b);

  return {
    template: '<div ng-include="get_template()" />',
    replace: true,
    restrict: 'E',
    scope: {
      type: '@'
    },
    link: function($scope, $element){
      var get_template = function(){
          if($scope.type == 'others'){
              return 'template2.html';
          } else {
              return 'template1.html';
          }
      };
    }
  }
});

但上述方法仍有<div ng-include />作为<div>template1</div>的父级，而我只需要<div>template。

有什么办法吗？

提前致谢。

Answer 1

您可以在Angular中使用restrict限制为＆＃39; A＆＃39;并添加＆＃39;示例＆＃39;作为属性。

详细了解restrict in directive：AngularJS Directive Restrict A vs E

Answer 2

我猜您需要使用<ng-transclude>代替并将模板附加到元素中。那可能是肝脏。如下所示：

app.directive('sample', function($compile, $templateCache){
  var a = '<div>template 1</div>';
  var b = '<div>template 2</div>';

  $templateCache.put('template1.html', a);
  $templateCache.put('template2.html', b);

  return {
    template: '<div><div ng-transclude></div>',
    replace: true,
    restrict: 'E',
    transclude: true,
    scope: {
      type: '@'
    },
    link: function($scope, $element){
          var elem_0 = angular.element($element.children()[0]);
          var templateToAppend = angular.element($compile( get_template() ));
          elem_0.append(templateToAppend);

      var get_template = function(){
          if($scope.type == 'others'){
              return 'template2.html';
          } else {
              return 'template1.html';
          }
      };
    }
  }
});

如果您遇到任何问题，请告诉我

Angular Directive - 在嵌入模板时替换标记

2 个答案: