Is Angular js incompatible with jquery multiselect

Question

I have this jQuery selectors. Everything was working fine but just by adding and initializing angular, the multiselect stops working. You can try removing everything that is not necesary and you'll see this happens:

(I don't know why github's urls are not working here, but you can download the file if needed, as that is not the problem I'm trying to depict)

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

If you are still having trouble using this multiselect plugin, I suggest that you make your own multiselect using directives - its pretty easy. Look at this multiselect https://github.com/akashrajkn/sf-multiselect plugin. — akashrajkn, Sep 28 '15 at 16:55
I think your title should mention that is not just a "jQuery multiselect" but the Bootstrap multiselect. Not sure if this helps, but try this: http://stackoverflow.com/questions/16954605/how-can-i-use-bootstrap-multiselect-dropdown-in-angularjs — Mohair, Sep 28 '15 at 17:00
`document.ready` is fairly worthless in angular. jQuery plugins should be initialized in directives to assure element exists when code is run. That being said you should probably look at getting rid of bootsrap.js and using angular modules and directives that are also readily available — charlietfl, Sep 28 '15 at 17:21
Don't you get an error here: "my_app.controller(controllers)" ? The "controller" method expects 2 arguments: "controller(name, constructor);" — o4ohel, Sep 28 '15 at 18:23
No errors. By the way, what happens is that jquery's checkboxes don't get cheked, i don't know why — Vandervals, Sep 28 '15 at 22:29

score 1 · Accepted Answer · edited May 23 '17 at 12:22

As mentioned in the comments add the jQuery plugin code in a directive and remove the document.ready stuff because it's not needed in the directive. The DOM is ready when you're adding the plugin code in directive's link method.

I haven't tested the rest of your angular code because it looks too complicated and I've re-coded it to improve readability. (Maybe your code is working but I wouldn't code it like this.)

Please have a look at the demo below or in this jsfiddle.

Update 29.09.15

For a better understanding of directives please read the documentation about directives to get the basics for custom directives.

Anyway here is the explanation to the directive:

The multiselect directive is added as attribute directive (restrict: 'A') to the select tag and so element inside of link function is the select tag where you'd like to apply the jQuery plugin. (Inside of link it's safe to use jQuery functions but I'd recommend to reduce the usage to a miminimum.)

Search for link, compile, controller in google or here at SO to learn more about directives. There is a question for the difference between them here at SO.

You could also create an element directive with template then you can add the select tag into the directive and pass your selection with two-way binding. That's probably better here because it's more reusable.

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>

For me in FF 41 it works (see [screenshot](http://ctrlv.in/643126)). Do you get any error messages in the console? — AWolf, Sep 29 '15 at 07:40
can you explain me how that directive method you added works? — Vandervals, Sep 29 '15 at 07:42

Is Angular js incompatible with jquery multiselect

1 Answers1