Disabling seems to be totally broken except by adding `disabled` attribute

[zachlysobey]

It seems that the only way to toggle disabling of this directive is to add or remove the disabled attribute manually (at least in Chrome/OSX).

ng-disabled does not seem to work at all.

I forked @zauker's demo from Issue #78 which should make any issues clear.

http://plnkr.co/edit/YtlRjooAZiiv0uAN3a5G?p=preview

[zachlysobey]

Just pulled down the project and discovered a test relating to this failing on all browsers:

Toggle Switch when toggle is disabled ngModel does not change on click

INFO [Safari 9.0 (Mac)]: Connected on socket id YqCz8QBn0xtdnj8P2XCx
Firefox 34.0 (Mac) Toggle Switch when toggle is disabled ngModel does not change on click FAILED
    Expected false to equal true.
    @/Users/zach_lysobey/Development/scratch/angular-toggle-switch/test/angular-toggle-switch.spec.js:146:7

Safari 9.0 (Mac) Toggle Switch when toggle is disabled ngModel does not change on click FAILED
    Expected false to equal true.
    /Users/zach_lysobey/Development/scratch/angular-toggle-switch/test/angular-toggle-switch.spec.js:146:41
Chrome 46.0 (Mac) Toggle Switch when toggle is disabled ngModel does not change on click FAILED
    Expected false to equal true.
    Error: Expected false to equal true.
        at null.<anonymous> (/Users/zach_lysobey/Development/scratch/angular-toggle-switch/test/angular-toggle-switch.spec.js:146:34)
Chrome 46.0 (Mac): Executed 12 of 12 (1 FAILED) (0.685 secs / 0.373 secs)
Firefox 34.0 (Mac): Executed 12 of 12 (1 FAILED) (0.494 secs / 0.225 secs)
Safari 9.0 (Mac): Executed 12 of 12 (1 FAILED) (0.523 secs / 0.198 secs)
TOTAL: 3 FAILED, 33 SUCCESS

[zachlysobey]

I did a git bisect, and discovered the commit where this test started failing:

041c4d7f26249f28ae53934b2cc80b00954772a4 is the first bad commit
commit 041c4d7f26249f28ae53934b2cc80b00954772a4
Author: Christopher Garvis <cgarvis@gmail.com>
Date:   Mon Feb 9 21:36:37 2015 -0500

    Implement disabled via ngDisabled

[mnegahi]

I fix the issue, it works with ng-disabled

 (function () {
     var module = angular.module('toggle-switch', ['ng']);

module.provider('toggleSwitchConfig', function () {
    this.onLabel = 'On';
    this.offLabel = 'Off';
    this.knobLabel = '\u00a0';
    this.disbled = false;

    var self = this;
    this.$get = function () {
        return {
            onLabel: self.onLabel,
            offLabel: self.offLabel,
            knobLabel: self.knobLabel,
            disabled : self.disabled
        };
    };
});

module.directive('toggleSwitch', function (toggleSwitchConfig) {
    return {
        restrict: 'EA',

        require: 'ngModel',
        scope: {
            disabled: '=ngdisabled',
            onLabel: '@',
            offLabel: '@',
            knobLabel: '@'
        },
        template: '<div role="radio" class="toggle-switch" ng-class="{ \'disabled\': disabled }"> ' +
            '<div class="toggle-switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
            '<span class="switch-left" ng-bind="onLabel"></span>' +
            '<span class="knob" ng-bind="knobLabel"></span>' +
            '<span class="switch-right" ng-bind="offLabel"></span>' +
            '</div>' +
            '</div>' + '<div>val= {{isdisabled}} </div>',
        compile: function (element, attrs) {
            if (!attrs.onLabel) { attrs.onLabel = toggleSwitchConfig.onLabel; }
            if (!attrs.offLabel) { attrs.offLabel = toggleSwitchConfig.offLabel; }
            if (!attrs.knobLabel) { attrs.knobLabel = toggleSwitchConfig.knobLabel; }

            return this.link;
        },
        link: function (scope, element, attrs, ngModelCtrl) {
            var isEnabled = true;

            attrs.$observe('disabled', function (disabled) {
                if (disabled === 'true' || disabled) {
                    isEnabled = false;
                } else {
                    isEnabled = true;
                }
                scope.disabled = disabled;
            });

            element.on('click', function () {
                scope.$apply(scope.toggle);
            });

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

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

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

            };

            scope.toggle = function toggle() {
                if (isEnabled) {
                    scope.model = !scope.model;
                    ngModelCtrl.$setViewValue(scope.model);
                }
            };
        }
    };
});
})();

[zachlysobey]

@darksonwolf any chance of creating a Pull request for that? I want to see this fix implemented if it works as advertised.

I see you have a fork, but don't see this commit there?

[Grant-Lay]

Any progress on this? Any known workarounds?

[zachlysobey]

perhaps @darksonwolf's code above works? Maybe someone could check it out and submit a PR? I'd like to see this working myself... Any thoughts @cgarvis ?

[cgarvis]

PRs are most welcomed

[tole42]

i just created a pull request (https://github.com/cgarvis/angular-toggle-switch/pull/87) for this issue. I used to code from @darksonwolf

[Grant-Lay]

Any release date for the pull request?

[bensquire]

Would also like to see this implemented?

[dcruceanu]

Any release date for the pull request? :(