我有这个 jQuery 选择器。一切都工作正常，但只是通过添加和初始化 Angular ，多选停止工作。您可以尝试删除所有不必要的内容，您会看到这种情况:
(我不知道为什么 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>最佳答案
如评论中所述，在指令中添加 jQuery 插件代码并删除 document.ready 内容，因为指令中不需要它。
当您在指令的链接方法中添加插件代码时，DOM 就准备好了。
我没有测试你的其余 Angular 代码，因为它看起来太复杂了，我已经重新编码以提高可读性。 (也许您的代码可以正常工作，但我不会这样编写代码。)
请查看下面或此 jsfiddle 中的演示.
更新 29.09.15
为了更好地理解指令，请阅读有关 directives 的文档获取自定义指令的基础知识。
这里是对指令的解释:
multiselect 指令作为属性指令 (restrict: 'A') 添加到 select 标签，因此链接函数内的元素是您所在的 select 标签我想应用 jQuery 插件。 (在链接内部使用 jQuery 函数是安全的，但我建议将使用量减少到最低限度。)
在 google 或此处搜索 link, compile, controller 以了解有关指令的更多信息。在 SO 有一个关于它们之间区别的问题。 .
您还可以使用模板创建一个元素指令，然后您可以将 select 标记添加到该指令中，并通过双向绑定(bind)传递您的选择。这可能在这里更好，因为它更可重用。
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>关于javascript - Angular js是否与jquery multiselect不兼容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32827888/