AngularJS UniformJS Select Control not updating

Question

I'm building an application using AngularJS and UniformJS. I'd like to have a reset button on the view that would reset my select's to their default value. If I use uniform.js, it isn't working.

You can examine it here:

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

If you click the reset button continuously, nothing happens. If you remove the attribute, therefore no longer using uniform.js, everything behaves correctly.

Thanks

UPDATE:

Required the use of timeout.

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.reset = function() {
    $scope.test = "";
    $timeout(jQuery.uniform.update, 0);
  };
});

It looks like Uniform is really hacky. It covers up the actual select element, and displays span instead. Angular *is* working. The actual select element's value *is* changing, but the span that Uniform displays is not changing. I haven't found a nice way to tell uniform that its value has changed, yet. — John Tseng, Aug 13 '13 at 17:39
Yeah I figured. Btw, I tried using $.uniform.update(); but it takes two clicks to work. I would like it to work in the first click. — fbhdev, Aug 13 '13 at 17:44

John Tseng · Accepted Answer · 2013-08-13T18:11:09.637

16

Found it. For the sake of completeness, I'm copying my comment here:

It looks like Uniform is really hacky. It covers up the actual select element, and displays span instead. Angular is working. The actual select element's value is changing, but the span that Uniform displays is not changing.

So you need to tell Uniform that your values have changed with jQuery.uniform.update. Uniform reads the value from the actual element to place in the span, and angular doesn't update the actual element until after the digest loop, so you need to wait a little bit before calling update:

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.reset = function() {
    $scope.test = "";
    $timeout(jQuery.uniform.update, 0);
  };
});

Alternatively, you can put this in your directive:

app.directive('applyUniform',function($timeout){
  return {
    restrict:'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      element.uniform({useID: false});
      scope.$watch(function() {return ngModel.$modelValue}, function() {
        $timeout(jQuery.uniform.update, 0);
      } );
    }
  };
});

edited Aug 13 '13 at 18:11

answered Aug 13 '13 at 17:45

John Tseng

6,262
2
27
35

awesome... is there a way i can encapsulate this in the directive so I don't put UI related logic in my controller. It worked. Thanks. – fbhdev Aug 13 '13 at 17:52
@fahed You'd better put the clear button inside the directive. – zs2020 Aug 13 '13 at 17:54
I was thinking of having the refresh logic for a uniform control in a directive rather than the actual control. – fbhdev Aug 13 '13 at 17:57
@fahed I've updated the answer to place the update in the directive. – John Tseng Aug 13 '13 at 18:11

score 1 · Answer 2 · answered Apr 23 '15 at 00:33

Just a slightly different take on @john-tseng's answer. I didn't want to apply a new attribute to all my check-boxes as we had quite a few in the application already. This also gives you the option to opt out of applying uniform to certain check-boxes by applying the no-uniform attribute.

/*
 * Used to make sure that uniform.js works with angular by calling it's update method when the angular model value updates.
 */
app.directive('input', function ($timeout) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attr, ngModel) {
            if (attr.type === 'checkbox' && attr.ngModel && attr.noUniform === undefined) {
                element.uniform({ useID: false });
                scope.$watch(function () { return ngModel.$modelValue }, function () {
                    $timeout(jQuery.uniform.update, 0);
                });
            }
        }
    };
});

Anish Manchappillil · Answer 3 · 2015-04-20T11:32:33.147

Please try blow code.

    app.directive('applyUniform', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if (!element.parents(".checker").length) {
                element.show().uniform();
                // update selected item check mark
                setTimeout(function () { $.uniform.update(); }, 300);
            }
        }
    };
});


<input apply-uniform   type="checkbox" ng-checked="vm.Message.Followers.indexOf(item.usrID) > -1"   ng-click="vm.toggleSelection(item.usrID)" />

AngularJS UniformJS Select Control not updating

3 Answers3