ФорумПрограммированиеJavaScriptAngularJS → Директива для Switchery

Директива для Switchery

  • adw0rd

    Сообщения: 22959 Репутация: N Группа: в ухо

    Spritz 12 марта 2015 г. 8:46

    Есть такие красивые iOS7 переключатели, реализация на js http://abpetkov.github.io/switchery/

    Вот для него директива (взял из темы inspinia+)

    
    'use strict';
    
    /**
     * Module to use Switchery as a directive for angular.
     * @TODO implement Switchery as a service, https://github.com/abpetkov/switchery/pull/11
     */
    angular.module('ui.switchery', [])
        .directive('uiSwitch', ['$window', '$timeout','$log', '$parse', function($window, $timeout, $log, $parse) {
    
            /**
             * Initializes the HTML element as a Switchery switch.
             *
             * @TODO add a way to provide options for Switchery
             * $timeout is in place as a workaround to work within angular-ui tabs.
             *
             * @param scope
             * @param elem
             * @param attrs
             */
            function linkSwitchery(scope, elem, attrs, ngModel) {
                if(!ngModel) return false;
                var options = {};
                try {
                    options = $parse(attrs.uiSwitch)(scope);
                }
                catch (e) {}
                $timeout(function() {
                    var switcher = new $window.Switchery(elem[0], options);
                    var element = switcher.element;
                    element.checked = scope.initValue;
                    switcher.setPosition(false);
                    element.addEventListener('change',function(evt) {
                        scope.$apply(function() {
                            ngModel.$setViewValue(element.checked);
                        })
                    })
                }, 0);
            }
            return {
                require: 'ngModel',
                restrict: 'AE',
                scope : {initValue : '=ngModel'},
                link: linkSwitchery
            }
        }]);
    


    Спустя 90 сек.


    О, нашел более свежую имплементацию https://github.com/servergrove/NgSwitchery/blob/master/src/ng-switchery.js
    https://smappi.org/ - платформа по созданию API на все случаи жизни

Пожалуйста, авторизуйтесь, чтобы написать комментарий!