摘要:關于個管道的用法會在下一篇里面講。一般需要通過去調用方法去時和上掛載的屬性值保持一致。方法是可以重新自定義的上的屬性值,已經發生變化利用這些值再次可以再次做相應的處理,然后更新抽時間把關于再補上。參考資料指令中使用中的的詳解
第一個點,要了解下:
DOM value
$viewValue
$modelValue
scope上掛載的屬性的值
一般有2個流程:
$viewValue -->> $modelValue -->> scope 上掛載的屬性的值
scope上掛載的屬性的值 -->> $modelValue -->> $viewValue
ngModel常用的場景就是如果你使用第三方的插件例如時間插件,每次選擇時間后都是更新DOM value的值,這個時候DOM value上的值事實上是你需要綁定到scope屬性上的值。那么這個時候就需要ngModelController。
在第一個流程當中,例如我加載了一個時間插件:pikaday
html:js: angular.module("demoApp", []).controller("demoCtrl", function($scope) { $scope.date = { from: "" }; $scope.$watch("date.from", function(val) { console.log(val); }); }) .directive("testDirective", ["$timeout", function($timeout) { return { restrict: "EA", require: "?ngModel", link: function(scope, ele, attrs, ngModel) { template: "", link: function (scope, ele, attr, ngModel) { var picker = new Pikaday({ field: $("#pikadayTimerPicker")[0], firstDay: 0, yearRange: [2000, 2020], format: "YYYY-MM-DD", hours24format : false, showTime : true, splitTimeView : true, showSeconds : true, minutesStep : 5, i18n: { previousMonth : "上月", nextMonth : "下月", months : ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], weekdays : ["周日","周一","周二","周三","周四","周五","周六"], weekdaysShort : ["日","一","二","三","四","五","六"] }, onSelect: function () { if(!ngModel) return; //如果ngModel不存在 ngModel.$setViewValue(this._d); } }); } } } })選擇的時間為: {{date.from}}
在onSelect回調事件里面,調用了ngModel.$setViewValue方法,它的作用就是使DOM value -->> $viewValue -->> $modelValue -->> scope上綁定的屬性.
第二個流程當中,比如你需要初始化一個時間,這個時間可能是從你后臺調過來的,或者是獲取的本地的時間.那么你首先要綁定scope上的屬性值,但是這個時候在時間插件上面顯示的時間并不是scope上綁定的屬性值,這個時候就需要$render方法了:
$scope.data.from = $filter(new Date().valueOf())("YYYY-MM-DD hh:mm:ss"); xxxxx var picker = new Picker({ xxxx }); //這個地方調用 ngModel.$render = function() { $("#pikadayTimerPicker").val(ngModel.$viewValue); } xxxxx
這里執行的流程就是:
scope上綁定的屬性值發生變化 -->> $modelValue -->> $viewValue -->> 調用$("#pikadayTimerPicker").val(ngModel.$viewValue)去更新DOM value.
在2個流程當中還應當注意一些地方:
第一個流程當中會經過$parsers, $validators2個管道。
第二個流程當中會經過$formatters,$render, $validators 3個管道。
關于$parses, $formatters , $validators 3個管道的用法會在下一篇里面講。
這里著重講一下源碼里的$render方法(文檔23189行),
ctrl.$render = function() { // Workaround for Firefox validation #12102. var value = ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue; if (element.val() !== value) { element.val(value); } };
這里就是首先判斷$viewValue是否為空,然后再判斷當前元素的DOM Value和$viewValue是否一樣,再選擇是否更新視圖。
另外就是需要注意的一個地方(文檔26947行):
$scope.$watch(function ngModelWatch() { var modelValue = ngModelGet($scope); //獲取scope上綁定的ng-model的值 // if scope model value and ngModel value are out of sync // TODO(perf): why not move this to the action fn? if (modelValue !== ctrl.$modelValue && // checks for NaN is needed to allow setting the model to NaN when there"s an asyncValidator (ctrl.$modelValue === ctrl.$modelValue || modelValue === modelValue) ) { ctrl.$modelValue = ctrl.$$rawModelValue = modelValue; parserValid = undefined; var formatters = ctrl.$formatters, idx = formatters.length; var viewValue = modelValue; while (idx--) { viewValue = formatters[idx](viewValue); } if (ctrl.$viewValue !== viewValue) { ctrl.$$updateEmptyClasses(viewValue); ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue; ctrl.$render(); ctrl.$$runValidators(modelValue, viewValue, noop); } } return modelValue; });
$render方法一般是當ng-model的值發生變化的時候就會觸發:
例如ng-model直接放在input,select標簽內,那么ng會自動響應ng-model變化后,便會觸發這個方法,來使Dom和$scope上掛載的屬性值保持相同.
指令內部封裝了input標簽,但是ng-model是在指令外部的外部標簽下時。一般需要通過event handler去調用ngModel.$setViewValue方法去時DOM Value和scope上掛載的屬性值保持一致。具體的demo就如上例。
ngModel.$render方法是可以重新自定義的:
ngModel.$render = function() { // scope上的屬性值,$modelValue, $viewValue已經發生變化 // 利用這些值再次可以再次做相應的處理,然后更新DOM value }
抽時間把關于ngModel再補上。睡覺。
參考資料:
angular指令中使用ngModelController
Angular中ngModel的$render的詳解
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79514.html
摘要:由于的屬性提供了令牌,并且該令牌指向的對象就是,所以構造函數中注入的令牌包含的對象數組只有一個。這樣的構造函數里就會包含一個對象,然后把這個傳給對象,最后注冊回調,這樣以后值更新時就會運行。整個包的設計也是按照這種數據流形式,并不復雜。 我們知道,Angular 的 @angular/forms 包提供了 NgModel 指令,來實現雙向綁定,即把一個 JS 變量(假設為 name)與...
摘要:但實際上這時程序并沒有計算手續費。經過排查并查閱文檔之后,發現是的問題。本文沒有具體介紹和管道,關于這部分可以參考文中給出的鏈接 事情起源于在項目中遇到的一個小問題:項目中需要一個輸入框輸入賣出產品數量,并且在用戶輸入后根據輸入數據計算手續費。很自然的我用了ng-model和ng-change,并且一般情況下沒什么問題。問題是:輸入框下還有一個按鈕是全部賣出,點擊這個按鈕程序會自動設置...
摘要:校驗器運行完成后,會設置屬性,從而計算的屬性,假設校驗錯誤,則屬性值為。這樣就理解了校驗器的整個運行過程,也包括為何校驗錯誤時會自動添加描述控件狀態的。 我們知道,@angular/forms 包主要用來解決表單問題的,而表單問題非常重要的一個功能就是表單校驗功能。數據校驗非常重要,不僅僅前端在發請求給后端前需要校驗數據,后端對前端發來的數據也需要校驗其有效性和邏輯性,尤其在存入數據庫...
閱讀 2446·2021-10-13 09:40
閱讀 3334·2019-08-30 13:46
閱讀 1120·2019-08-29 14:05
閱讀 2953·2019-08-29 12:48
閱讀 3654·2019-08-26 13:28
閱讀 2142·2019-08-26 11:34
閱讀 2277·2019-08-23 18:11
閱讀 1156·2019-08-23 12:26