CODEWITHSUNDEEP
angularjsangularjs-directivejquery-uniform
fbhdev
fbhdev

Reputation: 526

AngularJS UniformJS Select Control not updating

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);
  };
});

Upvotes: 5

Views: 3272

Answers (3)

mark
mark

Reputation: 1779

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);
                });
            }
        }
    };
});

Upvotes: 1

Anish Manchappillil
Anish Manchappillil

Reputation: 735

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)" />

Upvotes: 0

John Tseng
John Tseng

Reputation: 6352

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);
      } );
    }
  };
});

Upvotes: 16

Related Questions