2013-11-09 16 views
8

Ho una costante denominata Config che contiene un attributo task.minlength = 3.Valore dinamico in ng-minlength

sto aggiungendo la costante nella $rootScope:

.run(function($rootScope, Config) { 
    $rootScope.Config = Config; 
}) 

Da all'interno di un modello, voglio impostare Config.task.minlength valore nella direttiva ng-minlength di un ingresso:

<input type="text" ng-model="newTask" placeholder="Write a new task..." required ng-minlength="{{ Config.task.minlength }}"> 

che ottiene correttamente analizzato secondo to DevTools:

enter image description here

Tuttavia, la convalida non viene attivato:

$scope.form.$error['minlength'] // undefined 

Funziona benissimo quando ho appena scrivo 3 invece di interpolazione Config.task.minlength.

Il valore di ng-minlength deve essere hardcoded? C'è qualche soluzione?

+0

rimuovere le parentesi di espressione e utilizzare solo la variabile – charlietfl

+0

Ancora nessuna fortuna, non viene visualizzato alcun errore a '$ scope.form. $ Error ['minlength']' – jviotti

+0

Che versione stai usando? non ho problemi ...e perché non usare '$ scope.form. $ error.minlength'? –

risposta

8

ngModelController no $observe o $eval il valore di ngMinlength in alcun modo, quindi ottiene solo valori interi statici.

ho creato la mia direttiva che usano $observe, Ecco un example:

app.directive('myMinlength',function(){ 
    return { 
    require: 'ngModel', 
    link: function(scope,elm,attr,ngModel){ 

     var minlength = 0; 

     var minLengthValidator = function(value){  
     var validity = ngModel.$isEmpty(value) || value.length >= minlength; 
     ngModel.$setValidity('minlength', validity); 
     return validity ? value : undefined; 
     }; 

     attr.$observe('myMinlength', function(val){ 
     minlength = parseInt(val,10); 
     minLengthValidator(ngModel.$viewValue); 
     }); 


     ngModel.$parsers.push(minLengthValidator); 
     ngModel.$formatters.push(minLengthValidator); 
    } 
    }; 
}); 

Utilizzare in questo modo:

<input type="text" name="something" my-minlength="{{config.min}}" ng-model="something"> 
1

Oh, ci sono alcuni errori di sintassi.

È necessario impostare un nome per l'ingresso:

<input name="newtask" type="text" ng-model="newTask" placeholder="Write a new task..." required ng-minlength="{{ Config.task.minlength }}"> 

Poi, si cattura l'errore come questo:

$scope.form.newtask.$error['minlength'] 
0

Non è difficile ottenere un valore dinamico di ng-minlength. Angular guarderà i valori di $ scope e si aggiornerà di conseguenza.

Consulta l'Plunker: http://plnkr.co/edit/tMHQq7YIBlvMw7A60H2e?p=preview

controller

function myCtrl(){ 
    $scope.myMinLength = 5; // could also come from config 
} 

Vista:

<input type="text" ng-model="myString" ng-minlength="myMinLength"> 

La cosa importante da notare, è che il valore di ng-minlength non deve essere in coppia.