AngularJS UniformJS Chọn Kiểm soát không cập nhật

Question

Tôi đang xây dựng một ứng dụng bằng AngularJS và UniformJS. Tôi muốn có nút đặt lại trên chế độ xem có thể đặt lại lựa chọn của tôi về giá trị mặc định của chúng. Nếu tôi sử dụng uniform.js, nó không hoạt động.

Bạn có thể kiểm tra nó ở đây:

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

Nếu bạn nhấp vào nút reset liên tục, không có gì xảy ra. Nếu bạn loại bỏ các thuộc tính, do đó không còn sử dụng uniform.js, mọi thứ hoạt động chính xác.

Cảm ơn

UPDATE:

buộc việc sử dụng thời gian chờ.

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

Answer 1

Tìm thấy. Vì mục đích hoàn chỉnh, tôi đang sao chép nhận xét của tôi ở đây:

Dường như Đồng phục thực sự là hacky. Nó bao gồm phần tử chọn thực tế và hiển thị khoảng thay thế. Góc đang hoạt động. Giá trị của phần tử lựa chọn thực tế đang thay đổi, nhưng khoảng thời gian mà hiển thị Đồng phục không thay đổi.

Vì vậy, bạn cần phải đồng ý rằng giá trị của bạn đã thay đổi với jQuery.uniform.update. Uniform đọc giá trị từ các yếu tố thực tế để đặt trong khoảng thời gian, và góc không cập nhật các yếu tố thực tế cho đến sau khi vòng lặp tiêu hóa, vì vậy bạn cần phải chờ đợi một chút trước khi cập nhật gọi:

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

Ngoài ra, bạn có thể đặt điều này trong chỉ thị của mình:

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

Vui lòng thử mã thổi.

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

Answer 3

Chỉ khác một chút về câu trả lời của @ john-tseng. Tôi không muốn áp dụng thuộc tính mới cho tất cả các hộp kiểm của mình vì chúng tôi đã có một số ít trong ứng dụng rồi. Điều này cũng cung cấp cho bạn tùy chọn để chọn không áp dụng thống nhất cho các hộp kiểm nhất định bằng cách áp dụng thuộc tính không thống nhất.

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