CODEWITHSUNDEEP
angularjs
peta
peta

Reputation: 139

Switch doesn't work with Angular UI Routing

I am developing an app in Angular using Angular UI Routing and a UI plug-in which that has "checkbox switches" based on bootstrap switches.

The problem is that the templates are loaded after the shell page which breaks the switches and they appear as normal checkboxes.Please note that the checkbox is wrapped in a parent div with class "switch" to appear properly.

My wish is to create a global solution and not having to add an attribute to each switch.

Here is a Plunker with the app so far: http://embed.plnkr.co/LRSGXqxjtbYcr6rjTj69/preview

I have just started learning Angular so I appreciate answers that are pretty specific. Thanks!

HTML:

<div class="switch">
    <input type="checkbox">
</div>

JS:

$(".switch").switch();

Documentation: https://tictail.com/developers/documentation/uikit/#Switches

Upvotes: 0

Views: 196

Answers (1)

R&#233;mi Becheras
R&#233;mi Becheras

Reputation: 15222

Do not use jquery to switch, but angular :

<div class="switch" data-ng-controller="myController">
    <input type="checkbox" ng-model="myCheckbox">
</div>

<button ng-click="switch()">Switch programmatically</button>

<script type="text/javascript">

    angular.module('myApp')
    .controller('myController', ['$scope', '$timeout', function($scope, $timeout){
        $scope.myCheckbox = false; // initialise the checkbox to unchecked

        $timeout(function(){ // switch to checked 3 seconds later
            $scope.myCheckbox = true;
        },3000);

        $scope.switch = function(){
            $scope.myCheckbox = !$scope.myCheckbox;
        };
    }]);

</script>

DOM Manipulation in angularjs application (from angularjs FAQ):

Stop trying to use jQuery to modify the DOM in controllers. Really. That includes adding elements, removing elements, retrieving their contents, showing and hiding them. Use built-in directives, or write your own where necessary, to do your DOM manipulation. See below about duplicating functionality.

If you're struggling to break the habit, consider removing jQuery from your app. Really. Angular has the $http service and powerful directives that make it almost always unnecessary. Angular's bundled jQLite has a handful of the features most commonly used in writing Angular directives, especially binding to events.

Also I recommend you these great resources on the subject :

Upvotes: 1

Related Questions