0

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

peta
  • 139
  • 3
  • 18

1 Answers1

1

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 :

Community
  • 1
  • 1
Rémi Becheras
  • 14,902
  • 14
  • 51
  • 81
  • Thanks! I don't get any script errors, but nothing happens. Please note that I am using a particular framework based on jQuery that I must use, so the switches appearance and behaviour needs to be the same as if I had only used jQuery. – peta Aug 29 '14 at 11:44
  • Yes. Jquery and angularjs are not incompatible but their association need caution. I provided you some extra resources on it. – Rémi Becheras Aug 29 '14 at 11:58
  • However, it may be an other problem if nothin appears. Could you post a jsfiddle, codepen or else reproducing your issue ? – Rémi Becheras Aug 29 '14 at 12:01
  • Hi, I set up a Plunker without your suggested code: http://embed.plnkr.co/LRSGXqxjtbYcr6rjTj69/preview . For jquery form validate and select2 select boxes I use scope.$evalAsync – peta Sep 01 '14 at 13:29