Angular js与jquery多选不兼容吗答案

【问题标题】：Is Angular js incompatible with jquery multiselectAngular js与jquery多选不兼容吗
【发布时间】：2015-09-28 16:40:41
【问题描述】：

我有这个 jQuery 选择器。一切工作正常，但只是通过添加和初始化角度，多选停止工作。您可以尝试删除所有不必要的内容，您会看到这种情况发生：

（我不知道为什么 github 的 url 在这里不起作用，但是如果需要，您可以下载文件，因为这不是我要描述的问题）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>SPIROOX - Campaigns</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css" />
</head>

<body ng-app="campaign_listing">

  <div class="content" ng-controller="campaign_list_controller as ctrl">
    <h2>Campaign Administration</h2>
    <a href="" class="btn_new">+</a>

    <div class="filters">
      <select id="multiselect_status" ng-model="ctrl.filters.status" ng-change="ctrl.update_fields()" multiple="multiple">
        <option value="active">Active</option>
        <option value="suspended">Suspended</option>
        <option value="closed">Closed</option>
      </select>
    </div>

  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

  <script>
    $(document).ready(function() {
      $('#multiselect_status').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true,
        nonSelectedText: 'Status'
      });
    });
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
  <script>
    var my_app = angular.module("campaign_listing", []);
    var controllers = {};
    controllers.campaign_list_controller = function($http) {
      this.filters = {
        status: 'active',
        client: null
      };
      var campaigns = {};
      this.update_fields = function() {
        console.log("update!");
        console.log(this.filters);
      }
    }
    my_app.controller(controllers);
  </script>
</body>

</html>

【问题讨论】：

如果您在使用这个多选插件时仍然遇到问题，我建议您使用指令创建自己的多选 - 它非常简单。看看这个多选 github.com/akashrajkn/sf-multiselect 插件。
我认为您的标题应该提到这不仅仅是“jQuery 多选”，而是 Bootstrap 多选。不确定这是否有帮助，但试试这个：stackoverflow.com/questions/16954605/…
document.ready 在角度上是毫无价值的。 jQuery 插件应该在指令中初始化，以确保在代码运行时元素存在。话虽如此，您可能应该考虑摆脱 bootsrap.js 并使用也很容易获得的角度模块和指令
这里没有报错：“my_app.controller(controllers)”吗？ “控制器”方法需要 2 个参数：“控制器（名称，构造函数）；”
没有错误。顺便说一句，发生的事情是 jquery 的复选框没有得到检查，我不知道为什么

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

如 cmets 中所述，在指令中添加 jQuery 插件代码并删除 document.ready 内容，因为指令中不需要它。当您在指令的链接方法中添加插件代码时，DOM 已准备就绪。

我还没有测试你的 Angular 代码的其余部分，因为它看起来太复杂了，我已经对其进行了重新编码以提高可读性。（也许你的代码可以工作，但我不会这样编码。）

请看下面的演示或jsfiddle。

更新 29.09.15

为了更好地理解指令，请阅读有关directives 的文档以获取自定义指令的基础知识。

这里是对指令的解释：

multiselect 指令作为属性指令 (restrict: 'A') 添加到 select 标记中，因此链接函数内的元素是您要应用 jQuery 插件的 select 标记。（在链接内部使用 jQuery 函数是安全的，但我建议将使用量减少到最低限度。）

在 google 或在 SO 中搜索 link, compile, controller 以了解有关指令的更多信息。在SO这里有一个关于它们之间区别的问题。

您还可以使用模板创建一个元素指令，然后您可以将选择标记添加到指令中并通过双向绑定传递您的选择。这在这里可能会更好，因为它更可重用。

angular.module('campaignListing', [])
    .controller('CampaignListController', CampaignListController)
    .directive('multiselect', MultiSelectDirective);

function CampaignListController($http) {
    this.filters = {
        status: 'active',
        client: null
    };
    var campaigns = {};
    this.update_fields = function () {
        console.log("update!");
        console.log(this.filters);
    }
}

function MultiSelectDirective() {
    return {
        restrict: 'A',
        link: function (scope, element) {
            $(element).multiselect({
                includeSelectAllOption: true,
                enableFiltering: true,
                nonSelectedText: 'Status'
            });
        }
    }
}

<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div ng-app="campaignListing">
    <div>
        <div class="content" ng-controller="CampaignListController as ctrl">
             <h2>Campaign Administration</h2>
 <a href="" class="btn_new">+</a>

            <div class="filters">
                <select id="multiselect_status" multiselect ng-model="ctrl.filters.status" ng-change="ctrl.update_fields()" multiple="multiple">
                    <option value="active">Active</option>
                    <option value="suspended">Suspended</option>
                    <option value="closed">Closed</option>
                </select>
            </div>
        </div>
    </div>
</div>

【讨论】：

对我来说，在 FF 41 中它可以工作（参见 screenshot）。您是否在控制台中收到任何错误消息？
你能解释一下你添加的指令方法是如何工作的吗？