AngularJS UniformJS नियंत्रण का चयन नहीं करें

Question

मैं AngularJS और UniformJS का उपयोग कर एक एप्लिकेशन बना रहा हूं। मैं उस दृश्य पर रीसेट बटन रखना चाहता हूं जो मेरे चयन को उनके डिफ़ॉल्ट मान पर रीसेट कर देगा। अगर मैं वर्दी.जेएस का उपयोग करता हूं, तो यह काम नहीं कर रहा है।

आप इसे यहाँ की जांच कर सकते हैं:

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

मिला। पूर्णता के लिए, मैं यहां अपनी टिप्पणी की प्रतिलिपि बना रहा हूं:

ऐसा लगता है कि वर्दी वास्तव में हैकी है। यह वास्तविक चयन तत्व को कवर करता है, और इसके बजाय अवधि प्रदर्शित करता है। कोणीय काम कर रहा है। वास्तविक चयन तत्व का मान बदल रहा है, लेकिन समान प्रदर्शन प्रदर्शित करने वाला अवधि बदल नहीं रहा है।

तो आपको एक समान बताने की आवश्यकता है कि आपके मूल्य jQuery.uniform.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

कृपया झटका कोड आज़माएं।

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

बस जॉन-सेंग के उत्तर पर थोड़ा अलग ले लो। मैं अपने सभी चेक-बॉक्स में एक नई विशेषता लागू नहीं करना चाहता था क्योंकि हमारे पास पहले से ही एप्लिकेशन में बहुत कुछ था। यह आपको नो-वर्दी विशेषता लागू करके कुछ चेक-बॉक्स में वर्दी लगाने के विकल्प को चुनने का विकल्प भी देता है।

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