AngularJS UniformJS Select Control not update

Question

Sto costruendo un'applicazione utilizzando AngularJS e UniformJS. Mi piacerebbe avere un pulsante di reset sulla vista che reimpostasse la mia selezione sul valore predefinito. Se uso uniform.js, non funziona.

È possibile esaminare qui:

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

Se si fa clic continuamente il pulsante di reset, non succede nulla. Se si rimuove l'attributo, quindi non si utilizza più uniform.js, tutto si comporta correttamente.

Grazie

UPDATE:

richiesto l'uso di timeout.

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

Answer 1

Trovato. Per completezza, sto copiando il mio commento qui:

Sembra che Uniform sia davvero hacky. Copre l'effettivo elemento di selezione e visualizza invece l'intervallo. Angolare sta funzionando. Il valore dell'elemento di selezione effettivo sta cambiando, ma l'intervallo visualizzato da Uniform non cambia.

Quindi è necessario comunicare a Uniforme che i valori sono stati modificati con jQuery.uniform.update. Uniforme legge il valore dall'elemento reale di collocare nel giro, e angolare non aggiorna l'elemento effettivo fino a dopo il ciclo digest, quindi è necessario aspettare un po 'prima di chiamare update:

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

In alternativa, è possibile inserire questo nella direttiva:

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

Si prega di provare il codice di avviamento.

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

Solo una presa leggermente diversa sulla risposta di @ john-tseng. Non volevo applicare un nuovo attributo a tutte le mie check-box poiché ne avevamo già parecchie nell'applicazione. Questo ti dà anche la possibilità di disattivare l'applicazione di uniformi a determinate check-box applicando l'attributo non uniforme.

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