我正在尝试使用 ng-attr-< 根据特定属性的值将
指令。不幸的是,这对我不起作用。我已经设置了一个 plunker 示例来展示正在发生的事情。 multiple
属性添加到 ui-select
指令
最佳答案
编辑
看完上面提到的GitHub Issue终于明白了在 Angular 仓库中。
您需要设置一个具有更高优先级
的指令,并将terminal
属性设置为true(它会跳过所有其他指令的编译,在我们的编译之后指示)。
然后在 postLink
函数中,我们将编译整个元素本身。但在此之前我们自己的指令需要被删除(无限循环!)。
大人物出局 Add directives from directive in 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);
}
};
}
};
});
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>
工作计划:
http://plnkr.co/edit/N11hjOFaEkFUoIyeWqzc?p=preview
原始答案(也有效,但代码重复)
我做了以下事情:
- 创建了一个名为
multi-select-checker
的包装指令 - 在该指令中检查
options.Multiple
是真还是假 - 为每个案例返回两个不同的模板 URL。情况 1):返回 single-select.tpl.html 或情况 2):返回 mutli-select.tpl.html(其中包括“多个”指令。
指令代码:
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>
模板一:单选
<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:http://plnkr.co/edit/T9e5tcAkcQLsDV3plfEl?p=preview
关于javascript - 有条件地将 "multiple"属性添加到 ui-select,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31872232/