jumplink / angular-toggle-switch Goto Github PK

<toggle-switch ng-model="onPause" class="switch-success switch-mini"><toggle-switch>

<div class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <form name="formAgencyPost" class="form-horizontal" role="form">

                <div class="modal-header">
                    <button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{{ title }}</h4>
                </div>

                <div class="modal-body">

                    <div class="form-group">
                        <label for="testSwitch" class="control-label col-sm-4 col-lg-3">Test switch</label>
                        <div class="col-sm-8 col-lg-6">
                            <toggle-switch id="testSwitch"
                                name="testSwitch"
                                data-model="testSwitch"
                                class="switch-success"
                                on-label="true"
                                off-label="false"
                                required="required">
                            </toggle-switch>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" ng-click="close()" class="btn btn-primary">OK</button>
                    <button type="button" ng-click="cancel()" class="btn btn-default">Cancel</button>
                </div>

            </form>

        </div>
    </div>
</div>

$scope.settings = {};
$scope.changeShopSettings = function(){
		console.log("changeShopSettings");
		$http({
			method: 'POST',
			url: '/winkelier/shop-settings',
			data: {
				shopId: $scope.shopId,
				showShop: $scope.settings.showShop,
				showAllProducts: $scope.settings.showAllProducts,
				sendProducts: $scope.settings.sendProducts,
				isDropShipper: $scope.settings.isDropShipper
			}
		}).then(function successCallback(response){
			console.log("settings saved", response);
		}, function errorCallback(response){
			console.log("ERROR", response);
		});
	}

return {
	restrict: 'EA',
	replace: true,
	require:'ngModel',
	scope: {
		isDisabled: '=',
		onLabel: '@',
		offLabel: '@',
		knobLabel: '@',
		html: '=',
		onChange: '&',
		onClass: '@',
		offClass: '@'
	},
	template:
				'<div class="ats-switch" ng-click="toggle()" ng-keypress="onKeyPress($event)" ng-class="{ \'disabled\': isDisabled }" role="switch" aria-checked="{{!!model}}">' +
					'<div class="switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
						'<span class="switch-left"></span>' +
						'<span class="knob"></span>' +
						'<span class="switch-right"></span>' +
					'</div>' +
				'</div>',
	compile: function(element, attrs) {
		if (angular.isUndefined(attrs.onLabel)) {
			attrs.onLabel = 'On';
		}
		if (angular.isUndefined(attrs.onClass)) {
			attrs.onClass = '';
		}
		if (angular.isUndefined(attrs.offLabel)) {
			attrs.offLabel = 'Off';
		}
		if (angular.isUndefined(attrs.offClass)) {
			attrs.offClass = '';
		}
		if (angular.isUndefined(attrs.knobLabel)) {
			attrs.knobLabel = '\u00a0';
		}
		if (angular.isUndefined(attrs.isDisabled)) {
			attrs.isDisabled = false;
		}
		if (angular.isUndefined(attrs.html)) {
			attrs.html = false;
		}
		if (angular.isUndefined(attrs.tabindex)) {
			attrs.tabindex = 0;
		}
		return function postLink(scope, iElement, iAttrs, ngModel) {
			iElement.attr('tabindex', attrs.tabindex);

			scope.toggle = function toggle() {
				if (!scope.isDisabled) {
					scope.model = !scope.model;
					ngModel.$setViewValue(scope.model);
					scope.onChange();
				}					
			};

			var spaceCharCode = 32;
			scope.onKeyPress = function onKeyPress($event) {
				if ($event.charCode == spaceCharCode && !$event.altKey && !$event.ctrlKey && !$event.metaKey) {
					scope.toggle();
					$event.preventDefault();
				}
			};

			ngModel.$formatters.push(function(modelValue) {
				return modelValue;
			});

			ngModel.$parsers.push(function(viewValue) {
				return viewValue;
			});

			ngModel.$viewChangeListeners.push(function() {
				scope.$eval(attrs.ngChange);
			});

			ngModel.$render = function() {
				scope.model = ngModel.$viewValue;
			};

			var bindSpan = function(span, html) {
				span = angular.element(span);
				var bindAttributeName = (html === true) ? 'ng-bind-html' : 'ng-bind';

				// remove old ng-bind attributes
				span.removeAttr('ng-bind-html');
				span.removeAttr('ng-bind');

				if (angular.element(span).hasClass("switch-left")) {
					span.attr(bindAttributeName, 'onLabel');
					span.attr('ng-class', 'onClass');
				}
				if (span.hasClass("knob"))
					span.attr(bindAttributeName, 'knobLabel');
				if (span.hasClass("switch-right")){
					span.attr(bindAttributeName, 'offLabel');
					span.attr('ng-class', 'offClass');
				}
				$compile(span)(scope, function(cloned, scope) {
					span.replaceWith(cloned);
				});
			};

			// add ng-bind attribute to each span element.
			// NOTE: you need angular-sanitize to use ng-bind-html
			var bindSwitch = function(iElement, html) {
				angular.forEach(iElement[0].children[0].children, function(span, index) {
					bindSpan(span, html);
				});
			};

			scope.$watch('html', function(newValue) {
				bindSwitch(iElement, newValue);
			});
		};
	}
};

<div class="col-md-3" ng-if="true">
  <toggle-switch model="someModel" html="true" class="switch-danger"
                 on-label='<i class="fa fa-trash-o"></i>'
                 off-label='<i class="fa fa-trash"></i>'>
    <toggle-switch>
</div>