摘要:关于个管道的用法会在下一篇里面讲。一般需要通过去调用方法去时和上挂载的属性值保持一致。方法是可以重新自定义的上的属性值,已经发生变化利用这些值再次可以再次做相应的处理,然后更新抽时间把关于再补上。参考资料指令中使用中的的详解
第一个点,要了解下:
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的详解
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79514.html
摘要:由于的属性提供了令牌,并且该令牌指向的对象就是,所以构造函数中注入的令牌包含的对象数组只有一个。这样的构造函数里就会包含一个对象,然后把这个传给对象,最后注册回调,这样以后值更新时就会运行。整个包的设计也是按照这种数据流形式,并不复杂。 我们知道,Angular 的 @angular/forms 包提供了 NgModel 指令,来实现双向绑定,即把一个 JS 变量(假设为 name)与...
摘要:但实际上这时程序并没有计算手续费。经过排查并查阅文档之后,发现是的问题。本文没有具体介绍和管道,关于这部分可以参考文中给出的链接 事情起源于在项目中遇到的一个小问题:项目中需要一个输入框输入卖出产品数量,并且在用户输入后根据输入数据计算手续费。很自然的我用了ng-model和ng-change,并且一般情况下没什么问题。问题是:输入框下还有一个按钮是全部卖出,点击这个按钮程序会自动设置...
摘要:校验器运行完成后,会设置属性,从而计算的属性,假设校验错误,则属性值为。这样就理解了校验器的整个运行过程,也包括为何校验错误时会自动添加描述控件状态的。 我们知道,@angular/forms 包主要用来解决表单问题的,而表单问题非常重要的一个功能就是表单校验功能。数据校验非常重要,不仅仅前端在发请求给后端前需要校验数据,后端对前端发来的数据也需要校验其有效性和逻辑性,尤其在存入数据库...
阅读 2430·2021-10-13 09:40
阅读 3304·2019-08-30 13:46
阅读 1105·2019-08-29 14:05
阅读 2925·2019-08-29 12:48
阅读 3638·2019-08-26 13:28
阅读 2118·2019-08-26 11:34
阅读 2251·2019-08-23 18:11
阅读 1138·2019-08-23 12:26