我希望能够在我的应用程序中执行以下操作：
<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中有没有其他方法可以实现这一点？
解决方法
问题是,当您将药丸自动完成时的数据转换为药丸时,您已经删除了药丸内容.
该转换替换了指令模板下的内容,因此,指令模板中的内容根本无法加载,因为已被转换覆盖.
我的建议很简单,不直接使用带有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',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>