Question

我想用包含多个div的包装器进行环绕和输入。我希望输入被放在名为“my-content”的div中。我正在使用一个指令来实现这一点，但它并没有放在包装器中。

这些是我尝试过的模板：
这不起作用

<div class="wrapper" >
  <div class="left-side" > </div>
  <div class="middle">
    <div class="top-side"> </div>
    <div class="my-content" ng-transclude ></div>
    <div class="bottom-side"> </div>
  </div>
  <div class="right-side"> </div>
</div>

但这有效

<div class="wrapper" >
  <div class="left-side" > </div>
  <div class="middle">
    <div class="top-side"> </div>
    <input class="my-content" ng-transclude />
    <div class="bottom-side"> </div>
  </div>
  <div class="right-side"> </div>
</div>

指令定义如下：

app.directive('wrapMe', function(){

  return {
      restrict: "A", 
      templateUrl: 'template.html',
      transclude: true,
      replace: true
  };

});

重申一点，我希望将wrap-me指令放在带有'my-content'类和ng-transclude的div中。我在这里错过了什么吗？

Plunker链接：http://plnkr.co/edit/oQtWNCBBuc61bRwzDjHP?p=preview

Answer 1

你几乎就在那里。只需将transclude选项更改为element，即可完成。基本上，您希望转换input元素及其内容。之前的选项（transclude: true）仅转换内容，这是空的，这就是它无法正常工作的原因。

app.directive('wrapMe', function(){

  return {
      restrict: "A", 
      templateUrl: 'template.html',
      transclude: 'element',
      replace: true
  };

});

更新了plunkr：http://plnkr.co/edit/IX0ELKR4wKOPtt2vO6FB?p=preview

使用指令和transclude换行内容

1 个答案: