NgModelController: $setViewValue,$render,Formatter, Parser


  NgModelController為ngModel directive提供了API。這個controller包含了關於data-binding,validation,css update, value formatting and parsing的相關service.該controller本意上設計不包含任何處理DOM渲染或者偵聽DOM events的邏輯。這些DOM相關的邏輯應該由其他使用ngModelController做databinding的directive來完成。Angular為幾乎所有的input elements提供這個DOM邏輯。

$render()

該函數在當view需要更新時調用,一般預期ng-modle的使用者需要實現這個方法:

$setViewValue(value, trigger)

該函數用於更新view的value,當需要變更view values時,需要調用該方法。典型地,這個函數由DOM的事件處理函數來調用。比如,一個input directive在當它的input變更時就會調用$setViewValue,再比如:select控件在當一個option被選擇時也會調用這個函數更新view value。

注意,當$setViewValue被調用時,新的value將會被staged,通過$parsers,$validators管道檢查后被commit到view中。

$parsers

這是ngModelController提供的一個函數指針數組,它將作為一個pipeline,當控件從DOM讀取value(由$viewVlaue緩存)時,這個$parsers數組中的所有函數將一個一個地執行。當順序執行完畢后返回的value被傳給$validators函數數組來做vaildation。如果parse發生錯誤,那么undefined將被返回。

$formatters

$formatters將包含一個作為pipeline的函數數組,在model value變更時被調用。這些函數將被反序調用,每個函數將其返回值傳遞給下一個函數。最后一個函數的輸出作為實際的DOM value($viewValue)

該函數用於format/convert values for display in the control

function formatter(value) {
  if (value) {
    return value.toUpperCase();
  }
}
ngModel.$formatters.push(formatter);

$validators

這是一個當model value變更時將會被調用的validator集合。

ngModel.$validators.validCharacters = function(modelValue, viewValue) {
  var value = modelValue || viewValue;
  return /[0-9]+/.test(value) &&
         /[a-z]+/.test(value) &&
         /[A-Z]+/.test(value) &&
         /\W+/.test(value);
};

綜合示例:

app.directive('changeCase', function(){
    return{
        restrict: 'A',
        templateUrl: 'scripts/directives/directive_templates/directive.html',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel){

            ngModel.$formatters.push(function(value){
    value.toUpperCase();
    return value;
});

           ngModel.$parsers.push(function(value){
    value.toUpperCase();
    return value;
});
        }
    };
});
<form role="form" name="myform">
    <div class="form-group">
        <label>View Value:</label>
        <input name="someinput" changecase="" ng-model="some_letters.value">
    </div>
</form>

<strong>ModelValue:</strong>   <br>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM