带有标签的 Angular UI select2 在自定义指令中不起作用答案

【问题标题】：Angular UI select2 with tags not working inside custom directive带有标签的 Angular UI select2 在自定义指令中不起作用
【发布时间】：2013-03-26 09:23:35
【问题描述】：

使用 Angular UI Select2 指令，在输入字段上定义标签。如果输入本身在自定义指令中，则它没有正确初始化并且控制台给出错误：

query function not defined for Select2 tagging

我怀疑这可能与指令的编译/链接顺序与调用 select 2 函数的顺序有关。

也许有一个简单的解决方法，也许使用编译函数或指令控制器而不是链接函数？或者可能是 Angular UI select2 指令的问题。

我做了一个显示问题的插件：

http://plnkr.co/edit/myE5wZ

所以我的问题是 - 如何让 select2 标签在自定义 Angular 指令中工作？

【问题讨论】：

找到了一种解决方法：如果您在控制器范围内定义变量，然后将它们传递给它可以工作的指令。 plnkr.co/edit/oHAWrK 。所以我认为这与范围内可用的东西有关，链接功能显然不是这样做的正确位置。理想情况下，我仍然希望有一个解决方案，我可以将 select2 选项封装在范围内，而不是如果有人知道该怎么做，就不必在父控制器中定义所有内容？

标签： angularjs angularjs-directive angular-ui jquery-select2

【解决方案1】：

最后，我设法找到了一个我很满意的解决方案，涉及嵌套两个指令，这样逻辑就可以封装在父指令中（不会溢出到控制器中）。

我的解决方案的 Plunker 在这里供任何可能偶然发现相同问题的人使用：

http://plnkr.co/edit/ZxAPF5BzkgPtn9xddCRM

【讨论】：

这很棒。这是我发现的一个解决方案，它让我尽可能接近我需要做的工作，但我仍然陷入困境。我正在尝试预先选择在控制台中输出的对象，但查询函数没有被调用plnkr.co/edit/0UVGid?p=preview。知道为什么吗？

【解决方案2】：

我今天刚刚遇到这个问题并总结了解决方法：

PostLinking 函数以相反的顺序执行（从最深的孙子到最大的祖父）。

将您的自定义模态代码（或任何设置 $scope 数据以供其子项使用的任何内容）放在 PreLinking 函数中。 PreLinking 函数从父到子，所有 PreLinking 函数都在 PostLinking 函数之前执行。

【讨论】：

初学者提示：需要像compile: function(element, attributes){ return { pre: function(scope, element, attributes, controller, transcludeFn){ scope.select2Option = { query: function(options){} }, post: function(scope, element, attributes, controller, transcludeFn){ } } }, 一样定义定义对象的编译函数

【解决方案3】：

我遇到了类似的问题。您的解决方案有效，但恕我直言，我认为更好的解决方案是使用控制器功能而不是指令内的链接功能。这样做确实需要嵌套指令。

【讨论】：

我最终编写了自己的指令，并将 angular ui 留给了自己的设备。如果您有时间创建 plnkr，我很想看看控制器功能的实现。

【解决方案4】：

通过使用控制器函数而不是指令中的链接函数，它正在工作。示例：

function myFunction() { 
  var dir = {};
  dir.scope = { myModel: '=' };
  dir.restrict = 'E';
  dir.templateUrl = 'myTemplate.html';
  dir.replace = true;
  dir.controller = function ($scope) {
    $scope.myVar = ...;
  };

  return dir;
};

【讨论】：

【解决方案5】：

我也有这个错误。我的简短解决方案：

<input type="hidden" 
       name="citizenship" 
       class="form-control input-sm col-sm-10" 
       style="width:500px" 
       multiple 
       ui-select2="params.options.citizenshipOptions"   
       ng-model="cvLang.content.citizenship"
       ng-repeat="a in [1]"
 />

ng-repeat="a in [1]" 是一个神奇的东西！！！我不清楚上下文的逻辑，但这是有效的。这可能有帮助吗？

【讨论】：