Question

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

（我不知道为什么github的网址不在这里工作，但你可以根据需要下载文件，因为这不是我试图描述的问题）

＆＃13;

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

＆＃13;

Answer 1

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

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

请查看下面的演示或此jsfiddle。

更新29.09.15

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

无论如何这里是指令的解释：

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

在Google中搜索link, compile, controller或在此搜索SO以了解有关指令的更多信息。在SO处有一个问题，它们之间存在差异。

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

＆＃13;

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'
            });
        }
    }
}

＆＃13;

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

＆＃13;

Angular js与jquery multiselect不兼容

1 个答案: