是否有一种方法可以在标记为ng-transclude元素之后转换模板，但不是在其中？

Question

angular.module('example', [])
.directive('wrapper', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: "<div class='row'><div class='col-lg-6'>" +
    "<div class='input-group'>" +
      "<input type='text' class='form-control' aria-label='...'>"+
      "<div class='input-group-btn'>" + "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Action <span class='caret'></span></button><ng-transclude></ng-transclude></div></div></div></div>"
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.js"></script>
<script src="https://rawgit.com/twbs/bootstrap/master/dist/js/bootstrap.js"></script>
<link href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="example">

Bootstrap markup is too complex, but opens a menu:</br>
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        
        <!-- this part to instert -->
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
        
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

</br></br>
Angular directive after the button is required (otherwise menu can not be opened):</br>
<wrapper>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</wrapper>
<!-- button failure -->

</div>

有一个E transclude =“true”angularjs例子：

<wrapper>
   <button ng-transclude>[transcluded content]</button>
</wrapper>

或

<wrapper>
   <button>Some</button>
   <div ng-transclude>[transcluded content]</div> <!-- additional element -->
</wrapper>

但我需要在按钮元素之后添加内容而不添加额外标记：

<wrapper>
   <button>Some</button>
   <ng-transclude>[transcluded content should be here]</ng-transclude>
   <!-- <ng-transclude></ng-transclude> additioonal element is not removed -->
</wrapper>

我正在尝试插入内容

• 在ng-transclude或
之后
• 而不是<ng-transclude></ng-transclude>元素

是否有一种简单的角度方式来解决这个问题？

Answer 1

简短的回答是：

link: function(scope, element, attrs) {
        var ngTransclude = $(element).find('ng-transclude');
        var child = ngTransclude.children()[0];
        $(child).unwrap();
      }

样本：

＆＃13;

＆＃13;

angular.module('example', [])
.directive('wrapper', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: "<div class='row'><div class='col-lg-6'>" +
    "<div class='input-group'>" +
      "<input type='text' class='form-control' aria-label='...'>"+
      "<div class='input-group-btn'>" + "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Action <span class='caret'></span></button><ng-transclude></ng-transclude></div></div></div></div>",
      link: function(scope, element, attrs) {
        var ngTransclude = $(element).find('ng-transclude');
        var child = ngTransclude.children()[0];
        $(child).unwrap();
      }
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.js"></script>
<script src="https://rawgit.com/twbs/bootstrap/master/dist/js/bootstrap.js"></script>
<link href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="example">

Bootstrap markup is too complex, but opens a menu:</br>
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        
        <!-- this part to instert -->
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
        
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

</br></br>
Angular directive after the button is required (otherwise menu can not be opened):</br>
<wrapper>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</wrapper>
<!-- button failure -->

</div>

＆＃13;

＆＃13;

＆＃13;