您可以在Angular中转换为子指令吗？

沃尔特·魏德纳

我希望能够做这样的事情在我的应用程序：

<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中完成此操作吗？

塞尔吉奥

问题是，你的时间transclude从丸自动完成数据，你已经删除了里面的内容丸丸。

该transclusion替换所以在丸内容指令模板根本无法加载，因为已被transclusion覆盖指令模板下的内容。

我的建议很简单，不与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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。