问题描述
我正在尝试使用ng-attr-指令基于某个属性的值将multiple属性添加到ui-select指令。
不幸的是，那不适合我。
我已经设置了一个示例来展示正在发生的事情。
1楼
ilmgb
6
已采纳
2015-08-07 08:29:12
编辑
在阅读Angular Repo中提到的后，我终于明白了。
您需要设置一个具有更高priority和terminal属性设置为true的指令（在编译指令之后跳过所有其他指令的编译）。
然后在postLink函数中，我们将编译整个元素本身。
但在此之前我们需要删除自己的指令（无限循环！）。
指令代码
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);
}
};
}
};
});
HTML代码
<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：
原始答案（也有效，但代码重复）
我做了以下事情：
-
创建了一个名为
multi-select-checker的包装指令 -
在该指令中检查
options.Multiple是true还是false - 为每个案例返回两个不同的模板URL。 情况1）：返回single-select.tpl.html或Case 2）：return mutli-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：单选
<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-attr-multiple方法不起作用。
另外我已经意识到，有两个单独的输入字段通过ng-attr-multiple方法呈现。
单个选择案例似乎被打破（通过删除多指令） - 这也是你的初始Plnkr。
工作守则
在这里查看工作的Plnkr： ：//plnkr.co/edit/T9e5tcAkcQLsDV3plfEl？p = preview
2楼
Tomislav
3
2015-08-07 07:58:12
这是你想要实现的目标：
<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>