5

我正在使用 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);
  };
});
4

3 回答 3

16

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

看起来制服真的很hacky。它覆盖了实际的 select 元素，并改为显示 span。角正在工作。实际选择元素的值在变化，但 Uniform 显示的跨度没有变化。

所以你需要告诉 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);
      } );
    }
  };
});
于 2013-08-13T17:45:16.700 回答
1

对@john-tseng 的回答略有不同。我不想将新属性应用于我的所有复选框，因为我们已经在应用程序中有很多。这也使您可以选择通过应用 no-uniform 属性来选择不将统一应用于某些复选框。

/*
 * 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);
                });
            }
        }
    };
});
于 2015-04-23T00:33:20.803 回答
0

请尝试打击代码。

    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)" />
于 2015-04-20T11:05:51.603 回答