包装指令和类复制

时间:2014-10-12 08:14:43

标签: angularjs angularjs-directive

我只是想制作一个包装元素的指令。我试过这个:

.directive('wrap', function() {
  return {
    restrict: 'A',
    replace: true,
    transclude: 'element',
    template: '<div class="wrapper" ng-transclude></div>'
  };
});

但是当我使用它时:

<a class="my-class" wrap>Hello</a>

我正在复制my-class

<div class="my-class wrapper" ng-transclude="" wrap="">
  <a class="my-class ng-scope" wrap="">Hello</a>
</div>

我想要的只是那个但在包装器div中没有​​my-class

<div class="wrapper" ng-transclude="" wrap="">
  <a class="my-class ng-scope" wrap="">Hello</a>
</div>

有可能吗?

1 个答案:

答案 0 :(得分:1)

您可以使用tranclude执行此操作:true:

app.directive('wrap', function() {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    template: '<div class="wrapper" ng-transclude></div>'
  };
});

HTML:

<div wrap><a class="my-class">Hello</a></div> 

或(如果使用restrict:'E'):

<wrap><a class="my-class">Hello</a></wrap>

输出:

<div class="wrapper" ng-transclude="" wrap="">
    <a class="my-class ng-scope">Hello</a>
</div>

http://plnkr.co/edit/Bxeeo4lytcicoXE65MU9?p=preview