个人中心
gpt4 book ai didi

javascript - Angular js是否与jquery multiselect不兼容

转载 作者：行者123 更新时间：2023-11-29 15:32:50 26 4
gpt4 key购买 nike

我有这个 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/

26 4 0
文章推荐： mysql - jpa自定义查询多参数
文章推荐： android自定义 TextView 无法添加到布局文件中
文章推荐： mysql - 具有单个记录的查询的多个结果
文章推荐： android - 在 Android 中更新 UI 的正确方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com