我试图根据使用ng-attr-指令的某个属性的值将multiple属性添加到ui-select指令。不幸的是，这对我不起作用。我设置了一个柱塞例子来展示正在发生的事情。
恰好示例
编辑
我终于得到了它后，通过阅读上述GitHub问题在Angular的Repo。
你需要设置一个具有更高priority和terminal属性设置为true的指令(在编译我们的指令之后，跳过所有其他指令的编译)。然后在postLink函数中编译整个元素本身。但在此之前，我们自己的指令需要被删除(无限循环!)。
在AngularJS中从指令中添加指令
指令代码angular.module('app')
.directive('multiSelectChecker', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true, //terminal means: compile this directive only
priority: 50000, //priority means: the higher the priority, the "firster" the directive will be compiled
compile: function compile(element, attrs) {
element.removeAttr("multi-select-checker"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-multi-select-checker"); //also remove the same attribute with data- prefix in case users specify data-multi-select-checker in the html
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
if(scope.options.Multiple == true) {
iElement[0].setAttribute('multiple',''); //set the multiple directive, doing it the JS way, not jqLite way.
}
$compile(iElement)(scope);
}
};
}
};
});
<ui-select ng-model="model.choice" multi-select-checker>
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
工作Plnkr:
<ui-select ng-model="model.choice" multi-select-checker>
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
http://plnkr.co/edit/N11hjOFaEkFUoIyeWqzc?p =
预览原始答案(也工作，但有重复的代码)
我做了以下操作:
- 创建了一个名为
multi-select-checker的包装指令 - 在该指令中检查
options.Multiple是否为真或假 - 为每种情况返回两个不同的模板url。Case 1):返回single-select.tpl.html或Case 2):返回multi -select.tpl.html(其中包括'multiple'指令。
指令代码:
app.directive('multiSelectChecker', function() {
return {
template: '<ng-include src="getTemplateUrl()"/>',
controller: function($scope) {
$scope.getTemplateUrl = function() {
if($scope.options.Multiple == true) {
console.log("multi-select");
return "multi-select.tpl.html"
}
else {
console.log("single select");
return "single-select.tpl.html"
}
}
}
}
})
在HTML中的用法:
<body ng-controller="DemoCtrl">
<multi-select-checker>
</multi-select-checker>
</body>
模板1:single select
<ui-select ng-model="model.choice">
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
模板2:多选
<ui-select ng-model="model.choice" multiple>
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
正如你所看到的，这两个模板只有一个指令不同:'multiple'。也许有更好的解决办法。
我甚至不明白，为什么ng- attro -multiple方法不起作用。
此外，我已经意识到，有两个独立的输入字段正在通过ng- attri -multiple方法呈现。
和单一的选择情况似乎被打破(通过删除多个指令)-这是在你最初的Plnkr以及。
工作代码查看工作Plnkr在这里:http://plnkr.co/edit/T9e5tcAkcQLsDV3plfEl?p=preview
这是你想要达到的效果吗?
<body ng-controller="DemoCtrl">
This works perfectly well:
<ui-select ng-model="model.choice" multiple>
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<br />
<br />
This does not work:
<ui-select ng-model="model.choice2" multiple="{{options.Multiple}}">
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</body>