Using Ratchet's Toggle Component with Angular

Question

I'm building a mobile app using Ratchet and Angular, and development has been great and fast.

However, I've run into a lot of trouble when using toggles. Ratchet adds an "active" class in this div when its state is active:

<div class="toggle">
   <div class="toggle-handle"></div>
</div>

However this is done outside of Angular, so my attempts to create a directive to $watch this change has been unsuccessful. Also, I haven't tested it but ngClass probably does not update the model if a class is added outside of Angular.

Ratchet's toggle.js has an event listener that fires when state is changed, but again, not only this is javascript outside of angular, but I am also not using jQuery, so I don't know how to add this callback from a view loaded inside a ng-view, and change the controller scope from such a callback.

Any help is appreciated.

You could remove the touchend event handler from ratchet and handle user input yourself inside angular. All ratchet is doing is adding the `active` to the class list which triggers a css animation. — kindasimple, Nov 18 '14 at 02:13
I'll look into that. Ratchet handles click/touch and swipe, so I'd have to include ngTouch in that solution, but could work. Thanks for the tip. — Fernando Piancastelli, Nov 18 '14 at 16:50

score 0 · Accepted Answer · answered Jan 12 '15 at 23:33

Eventually I solved my problem with a directive, unaware of Ratchet handlers as @kindasimple suggested:

HTML:

<div id="variable" class="toggle" my-toggle>
    <div class="toggle-handle"></div>
</div>

JS:

app.directive('myToggle', [function() {

    function link(scope, element, attrs) {
        scope.$watch(function() {
            return element.hasClass('active');
        }, function(value) {
            var id = element.attr('id');
            scope.save(id, value);
        });
    }

    return {
        restrict: 'A',
        scope: false,
        link: link
    };
}]);

Ratchet toggles an active class on clicks and touches, so my main idea was to $watch() that change. My directives didn't need an isolated scope on their on, I just wanted each toggle to update a variable on its controller's scope, hence the scope: false.

In my specific code, scope.save() is a controller function to save variables, so I could use it and element id to save its status. But a previous solution used $scope.$apply() inside the controller to force Angular to run a $digest() cycle and call scope.$watch() for the directives.

Using Ratchet's Toggle Component with Angular

1 Answers1