你能在Angular中转换成子指令吗？

Question

我希望能够在我的应用程序中执行以下操作:

<pill-autocomplete>
  <pill-template>{{item.name}}</pill-template>
</pill-autocomplete>

哪里pill-autocomplete有一个模板可以转换成这样的子指令:

<pills ng-transclude="pillTemplate"></pills>
<input type="text">

鉴于ng-transclude创建范围并且<pills>指令具有隔离范围,似乎不可能.

我想到实现这一点的一种方法是在自动完成模板功能中注入药丸模板.问题在于它失去了翻译范围.我还必须在每个与药丸有相似行为的指令中这样做.

在角度1.x中有没有其他方法可以实现这一点？

Answer 1

问题是，当您将数据从丸自动完成转换到丸时，您已经删除了丸中的内容。

嵌入替换了指令模板下的内容，因此丸指令模板中的内容根本无法加载，因为已被嵌入覆盖。

我的建议很简单，不要直接使用带有 ng-transclude 的标签，使用内部 div 来使指令加载其内容成为可能

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

  'use strict';

  var app =  angular.module('app');

  app.controller('testController', [
    function () {
      var vm = this;
      vm.name = 'Jimmy';
    }]);

  app.directive('pillAutocomplete', function () {
    return {
      priority: 100,
      restrict: 'E',
      transclude: true,
      template: '<pills><p>From Pill-Autocomplete</p><div ng-transclude><div></pills>'
    };
  });

  app.directive('pills', function () {
    return {
      restrict: 'E',
      transclude: true,
      link: function (scope, element, attrs) {
        scope.style = true;
      },
      template: '<p>Inside Pills</p><div ng-class="{pillscolor : style}" ng-transclude></div>'
    };
  });

.pillscolor{
  color: green;
  font-size: 20px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="app">
<section ng-controller="testController as test">
 Controller scope - {{test.name}}
  <pill-autocomplete>
     From controller - {{test.name}}
  </pill-autocomplete>
</section>
</article>