Fatal编程技术网
  • javascript/
  • Javascript 有条件地加上；“多重”；用户界面选择的属性

Javascript 有条件地加上；“多重”；用户界面选择的属性

javascript angularjs

Javascript 有条件地加上；“多重”；用户界面选择的属性,javascript,angularjs,angularjs-directive,ui-select,Javascript,Angularjs,Angularjs Directive,Ui Select,我正在尝试使用ng attr-指令，根据特定属性的值，将multiple属性添加到ui select指令中。不幸的是，这对我不起作用。我已经设置了一个plunker示例来展示正在发生的事情 这就是您想要实现的目标： <body ng-controller="DemoCtrl"> This works perfectly well: <ui-select ng-model="model.choice" multiple> <ui-sel

我正在尝试使用
ng attr-
指令，根据特定属性的值，将
multiple
属性添加到
ui select
指令中。不幸的是，这对我不起作用。我已经设置了一个plunker示例来展示正在发生的事情

这就是您想要实现的目标：

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


这非常有效：
{{$item.Title}




这不起作用：
{{$item.Title}
编辑 在阅读了《角度回购协议》中提到的内容后，我终于得到了它

您需要设置一个优先级更高的指令
和
terminal
属性设置为true（编译指令后，它将跳过所有其他指令的编译）。
然后在
postLink
函数中，我们将编译整个元素本身。但在此之前，需要删除我们自己的指令（无限循环！）

大人物出击

指令码
HTML代码
HTML中的用法：




模板1：单选


{{$item.Title}


模板2：多选


{{$item.Title}


正如您所看到的，这两个模板只有一个不同的指令：“multiple”。也许有更好的解决办法

我甚至不明白为什么ng attr多重方法不起作用

此外，我还意识到，有两个单独的输入字段通过ng attr多重方法呈现

单一选择的情况似乎被打破了（通过删除多个指令）——这也是初始Plnkr中的情况

工作代码

请参见此处的工作Plnkr:
是，但它不工作。因为无论选项的值是多少，它总是被认为是一个多选。是的，我现在明白了。这似乎是angular please check中的一个开放问题，Narretz的回答是：“当前不支持绑定到多个。这是被禁止的，因为它导致select指令出现问题。”是的，我使用ng attr指令使其工作，但失败。它确实添加了多属性，但它搞乱了ui select match nested指令：显然，它是在添加多属性之前编译的，因此它的行为与在单选ui select上下文中的行为类似。你知道怎么解决这个问题吗？对不起，伙计，我不知道怎么解决这个问题。框架不支持它。这是一个正确的解决方案，但我希望避免重复代码，这就是为什么我首先尝试使用
ngattr
。无论如何，谢谢：）您可以排除
ui select
->的子项，从而减少重复的代码。我进一步调查了：似乎ng attr倍数没有计算（它的内容仍然是“{options.multiple}”。我已经检查了ui选择代码，它检查是否设置了multipe属性-对于ng attr multiple=“{{options.multiple}}”和甚至设置ng attr multiple=“”都将计算为true（因为它只是检查多属性是否定义为LoC-因此被呈现为多选。关于您试图实现的确切目标的更多信息：关于您的最终解决方案，如果有人想从控制器传递变量（不使用$scope）您需要创建一个隔离作用域，然后编译
$parent
。谢谢！

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>



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"
        }
      }
    }
  }
})



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



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