Angular ng-click not working with data-toggle="toggle"

Question

I am trying to use data-toggle="toggle" (from: http://www.bootstraptoggle.com/ ) on a checkbox. However, this breaks angulars ng-click and ng-change... They are simply not firing the function. Does anyone have a solution for this? Code snippet below:

<input type="checkbox"  
       ng-click="testFunction()" 
       ng-model="testValue" 
       checked 
       data-toggle="toggle">

You don't seem to have an ng-change in the code. Also have you tried wrapping the testFunction() in double quotes? Either way a Plunkr would be useful — Aron
– Aron, Commented Jul 17, 2016 at 11:35
Ok The reason it doesn't work is that Bootstrap Toggle is not made to work with Angular. Changing the DOM in any way that isn't through Angular, eg through jQuery like Toggle does, will cause conflicts with Angular's control of the DOM, and indeed it will not register DOM changes that don't happen through Angular. — Aron
– Aron, Commented Jul 17, 2016 at 11:47
If that answer helped I will post it as an answer and please accept it :) — Aron
– Aron, Commented Jul 17, 2016 at 12:13

Aron · Accepted Answer · 2016-07-17 12:13:51Z

2

The reason it doesn't work is that Bootstrap Toggle is not made to work with Angular. Changing the DOM in any way that isn't through Angular, eg through jQuery like Toggle does, will cause conflicts with Angular's control of the DOM, and indeed it will not register DOM changes that don't happen through Angular.

answered Jul 17, 2016 at 12:13

Aron

9,3187 gold badges37 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

Angular ng-click not working with data-toggle="toggle"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related