有条件地将“multiple”属性添加到ui-select

Question

我正在尝试使用ng-attr-指令基于某个属性的值将multiple属性添加到ui-select指令。 不幸的是，那不适合我。 我已经设置了一个示例来展示正在发生的事情。

Answer 1

编辑

在阅读Angular Repo中提到的GitHub问题后，我终于明白了。

您需要设置一个具有更高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);
          }
        };
      }
    };
  });

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：

http://plnkr.co/edit/N11hjOFaEkFUoIyeWqzc?p=preview

原始答案（也有效，但代码重复）

我做了以下事情：

创建了一个名为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： http ：//plnkr.co/edit/T9e5tcAkcQLsDV3plfEl？p = preview

Answer 2

这是你想要实现的目标：

<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>

有条件地将“multiple”属性添加到ui-select

问题描述

2 个解决方案

解决方案1
6 已采纳 2015-08-07 08:29:12

编辑

指令代码

HTML代码

工作Plnkr：

原始答案（也有效，但代码重复）

指令代码：

HTML中的用法：

模板1：单选

模板2：多选

工作守则

解决方案2
3 2015-08-07 07:58:12

有条件地将“multiple”属性添加到ui-select

问题描述

2 个解决方案

解决方案1 6 已采纳 2015-08-07 08:29:12

编辑

指令代码

HTML代码

工作Plnkr：

原始答案（也有效，但代码重复）

指令代码：

HTML中的用法：

模板1：单选

模板2：多选

工作守则

解决方案2 3 2015-08-07 07:58:12

解决方案1
6 已采纳 2015-08-07 08:29:12

解决方案2
3 2015-08-07 07:58:12