Using jQuery function inside AngularJS controller

Question

I needed to initialize a jQuery plugin on all elements with a certain class name which comes inside an ng-repeat loop. These elements are loaded via angularjs $http get method.

var app = angular.module('myApp', []);

app.controller('myController', function($scope, $http) {
    $http.get('get_item.php').success(function(response) {
        $scope.items = response;
        angular.element('.make-switch').bootstrapSwitch(); // jQuery plugin code
    });
});

But this doesn't work. I tried $('.make-switch').bootstrapSwitch(); also. Please help.

Create a custom directive, you should not do any plugin initialization in controller. — dfsq
– dfsq, Commented Nov 4, 2015 at 7:25
just use $('.make-switch').bootstrapSwitch(); Provided you've included jQuery and this plugin script. — AdityaParab
– AdityaParab, Commented Nov 4, 2015 at 7:26
@AdityaParab OP is already doing it, can't you see? But there is a good reason why it won't work reliably. And that's the reason why it should not be part of controller responsibility. — dfsq
– dfsq, Commented Nov 4, 2015 at 7:29
There is a similiar post: Call jQuery function from AngularJS Controller I hope it helps you — Ruben Perez
– Ruben Perez, Commented Nov 4, 2015 at 7:31

Sim · Accepted Answer · 2015-11-04 07:42:17Z

8

Create a directive and so you can initialize the plugin in your markup:

<div bootstrapswitch></div>

I think you creates your elements dynamicly with the scope variable $scope.items, something like that:

<div class="make-switch" ng-repeat="item in items" bootstrapswitch></div>

...just add the attribute bootstrapswitch to initialize the switch on your loaded elements.

...your directive could look like that:

app.directive('bootstrapswitch', [function() {
   return {
      restrict: 'A',
      link: function(scope, elem, attrs) {
         $(elem).bootstrapSwitch();
      }
   };
}]);

edited Nov 4, 2015 at 7:42

answered Nov 4, 2015 at 7:35

Sim

3,3171 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew · Accepted Answer · 2015-11-04 07:46:56Z

1

Actually, if you want to call any jQuery plugins inside angular code you can do this also with angular. It has built in jQuery called jqLite, and you can call this as angular.element("selector") which returns you a jQuery element. As a selector you can use any jQuery/css selectors you like.

By the way, calling jQuery directly in angular code like $("selector").method() is a bad practise. You should use only your angular jqLite functionallity

answered Nov 4, 2015 at 7:46

Andrew

1,5344 gold badges20 silver badges29 bronze badges

2 Comments

Adersh Over a year ago

i used angular.element('.make-switch').bootstrapSwitch();

Andrew Over a year ago

make sure your plugin included on webpage

eric · Accepted Answer · 2015-11-04 08:36:25Z

1

It not a pretty good idea to manipulate view using jQuery library inside Angular controller. Actually jQuery is grabbing or injecting into your DOM based on events.But Angular doesn't act the same way, it manipulate view based on true/false nature.

Best alternative way is try to make directive or use angular-bootstrap-switch library.

answered Nov 4, 2015 at 8:36

eric

114 bronze badges

Collectives™ on Stack Overflow

Using jQuery function inside AngularJS controller

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related