angula 之 ngModel
2015-10-15 00:00
906 查看
对于ngModel
提供 ngModelController
为ngModel提供api
包含 data-binding,validation,css updates, value formationg, parsing 等功能
对于 ngModal 的理解。如果是调用了angular 内部改写过的html 控件。对于绑定的ng-model 的控件,都会共享这个数据的结果。
例如
这个时候,两者同时改变的时候都会触发两者的变化。
但是
这个时候,由于angular 内部没有重写对于p标签的重写,导致ng-model 对这个控件是没有作用的。
ps: 可以通过ng-bind指令去解决这个问题。
但是可以通过万能的指令去解决这个问题。
这个时候就有用了。
提供 ngModelController
为ngModel提供api
包含 data-binding,validation,css updates, value formationg, parsing 等功能
// 方法 $render() // 需要被重写 默认是 noop 函数。 $setViewValue() $setValidity() $commitViewValue() $isEmpty() $rollbackViewValue() $setDirty() $setPristine() $setTouched() $setUntouched() $validate() // 属性 $formatters $viewValue $error $dirty $invalid $modelValue $name $options $parsers $pending $pristine $render $untoicued $valid $validators $viewChangeListeners 等等、
对于 ngModal 的理解。如果是调用了angular 内部改写过的html 控件。对于绑定的ng-model 的控件,都会共享这个数据的结果。
例如
<input type="text" ng-model="test"/> <textarea ng-model='test'></textarea>
这个时候,两者同时改变的时候都会触发两者的变化。
但是
<p ng-model="test"></p>
这个时候,由于angular 内部没有重写对于p标签的重写,导致ng-model 对这个控件是没有作用的。
ps: 可以通过ng-bind指令去解决这个问题。
但是可以通过万能的指令去解决这个问题。
.directive('testDirc',function(){ return { restrict:'A', require:'?ngModel', link:function(scope,element,attrs,ngModel){ if(!ngModel){ return; } ngModel.$render = function(){ element.html(ngModel.$viewValue); } } } })
这个时候就有用了。
<p ng-model="test" test-dirc></p>
相关文章推荐
- angular.element方法汇总
- Angular用来控制元素的展示与否的原生指令介绍
- 使用angular写一个hello world
- vue,angular,avalon这三种MVVM框架优缺点
- 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
- Angular中的Promise对象($q介绍)
- angular简介和其特点介绍
- angular中使用路由和$location切换视图
- 浅谈AngularJS--基础
- 再度迁移博客
- 7月国外最新技术文章翻译汇总(IT技术)
- 使用 angular-async-loader 来实现异步加载 angular 模块
- 整合jQuery Mobile+AngularJs 经验谈
- angular实用手册
- Angular apply使用的场景
- 原 初学angularJS笔记之Directive
- angular 过滤器记录
- angular 表单验证
- 理解Angular中的$apply()以及$digest()
- 学习Angular开发(1)----Yeoman 安装遇到的问题