Question

我正在使用AngularJS和UniformJS构建应用程序。我想在视图上有一个重置按钮，可以将我的选择重置为默认值。如果我使用uniform.js，则无效。

您可以在此处查看：

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

如果连续单击重置按钮，则不会发生任何事情。如果删除该属性，因此不再使用uniform.js，则一切都正常。

由于

更新：

需要使用超时。

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

Answer 1

找到它。为了完整起见，我在这里复制我的评论：

看起来Uniform非常hacky。它覆盖了实际的select元素，而是显示span。 Angular正在发挥作用。实际的选择元素的值正在变化，但统一显示的范围不会改变。

因此，您需要告诉Uniform您的值已随jQuery.uniform.update更改。 Uniform从实际元素中读取值以放置在span中，并且angular直到摘要循环之后才更新实际元素，因此在调用update之前需要稍等一点：

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

或者，你可以把它放在你的指令中：

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

Answer 2

对@ john-tseng的回答略有不同。我不想在我的所有复选框中应用新属性，因为我们已经在应用程序中有相当多的属性。这也允许您通过应用非均匀属性选择不对某些复选框应用统一。

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

Answer 3

请尝试吹码。

    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选择控件不更新

3 个答案: