Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Fix uibUncheckable for uibBtnRadio #6538

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

navarroaxel
Copy link
Contributor

Fix #6532

@navarroaxel navarroaxel force-pushed the uibBtnRadioUncheckable branch 2 times, most recently from fca5338 to ec20a33 Compare May 8, 2017 18:43
@navarroaxel navarroaxel changed the title fix(buttons): fix uibUncheckable using disable attrib for uibBtnRadio Fix uibUncheckable for uibBtnRadio May 8, 2017
Copy link
Contributor Author

@navarroaxel navarroaxel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please @icfantv can you review this? I need this fix for my project.
Thanks!

@@ -324,11 +324,11 @@ describe('buttons', function() {
});

describe('uibUncheckable', function() {
it('should set uncheckable', function() {
it('should set disabled', function() {
$scope.uncheckable = false;
var btns = compileButtons('<button ng-model="model" uib-btn-radio="1">click1</button><button ng-model="model" uib-btn-radio="2" uib-uncheckable="uncheckable">click2</button>', $scope);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the tests was made with button tags and the demo was made with label tags?


btns.eq(1).click();
expect($scope.model).toBeNull();
expect($scope.model).toEqual(1);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test was wrong. If I click a disabled button the value should not change or should not be converted to null.

@zacronos
Copy link
Contributor

zacronos commented Jun 5, 2017

LGTM.

Does anyone have any idea how soon or not this will be pulled into a release? This bug is impacting a project that is approaching beta launch, so I need to evaluate whether it's worth implementing a hack to work around the bug vs waiting for this fix to be merged.

@navarroaxel
Copy link
Contributor Author

@zacronos this is my hack by the moment...

gulp.task('fix:angular:bootstrap', () => {
    // fix https://github.com/angular-ui/bootstrap/issues/6532
    const path = './node_modules/angular-ui-bootstrap/src/buttons/';

    return gulp.src(`${path}buttons.js`)
        .pipe(require('gulp-replace')(
            'attrs.$set(\'uncheckable\', uncheckable ? \'\' : undefined);',
            'attrs.$set(\'disabled\', uncheckable ? \'disabled\' : undefined);'
        ))
        .pipe(gulp.dest(path));
});

this should run at clean stage, before the build.

@guillaume-brialon
Copy link

guillaume-brialon commented Nov 17, 2017

Thanks @navarroaxel for the fix.
I could not use a solution modifying the source so I added a directive decorator:

  angular.module('ui.bootstrap.buttons')
    .decorator('uibBtnRadioDirective', [ '$delegate', '$parse',
      function uibBtnRadioDirectiveDecorator($delegate, $parse) {
        var directive = $delegate[0];

        // fixed link function
        var link = function (scope, element, attrs, ctrls) {
          var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
          var uncheckableExpr = $parse(attrs.uibUncheckable);

          element.find('input').css({display: 'none'});

          //model -> UI
          ngModelCtrl.$render = function () {
            element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.uibBtnRadio)));
          };

          //ui->model
          element.on(buttonsCtrl.toggleEvent, function () {
            if (attrs.disabled) {
              return;
            }

            var isActive = element.hasClass(buttonsCtrl.activeClass);

            if (!isActive || angular.isDefined(attrs.uncheckable)) {
              scope.$apply(function () {
                ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.uibBtnRadio));
                ngModelCtrl.$render();
              });
            }
          });

          if (attrs.uibUncheckable) {
            scope.$watch(uncheckableExpr, function (uncheckable) {
              attrs.$set('disabled', uncheckable ? 'disabled' : undefined);
            });
          }
        };

        directive.compile = function() {
          return function(scope, element, attrs) {
            link.apply(this, arguments);
          };
        };

        return $delegate;
      }
    ]);

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants