AngularJS UniformJS Select Control wird nicht aktualisiert

Question

Ich entwickle eine Anwendung mit AngularJS und UniformJS. Ich hätte gerne eine Reset-Taste in der Ansicht, die meine Auswahl auf ihren Standardwert zurücksetzt. Wenn ich uniform.js verwende, funktioniert es nicht.

Sie hier untersuchen können:

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

Wenn Sie die Reset-Taste kontinuierlich klicken, passiert nichts. Wenn Sie das Attribut entfernen und daher uniform.js nicht mehr verwenden, verhält sich alles korrekt.

Dank

UPDATE:

erforderte den Einsatz von Timeout.

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

Answer 1

Es gefunden. Der Vollständigkeit halber kopiere ich meinen Kommentar hier:

Es sieht aus wie Uniform ist wirklich hacky. Es überdeckt das tatsächliche select-Element und zeigt stattdessen span an. Angular arbeitet. Der Wert des tatsächlichen Auswahlelements ändert sich, aber der Bereich, den Uniform anzeigt, ändert sich nicht.

Also müssen Sie Uniform sagen, dass Ihre Werte mit jQuery.uniform.update geändert haben. Uniform liest den Wert aus dem aktuellen Elemente in der Spanne zu platzieren, und Winkel nicht das eigentliche Element aktualisieren, bis nach der Digest-Schleife, so müssen Sie ein wenig warten, vor dem Aufruf von Update:

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

Alternativ Sie können dies in Ihre Direktive einfügen:

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

Bitte versuchen Sie den Code zu blasen.

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

Nur eine etwas andere Meinung zu @ John-Tseng's Antwort. Ich wollte kein neues Attribut auf alle meine Kontrollkästchen anwenden, da wir schon einige in der Anwendung hatten. Dadurch haben Sie auch die Möglichkeit, das Anwenden von uniform auf bestimmte Kontrollkästchen durch Anwenden des Nicht-Uniform-Attributs zu deaktivieren.

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