AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流。举个简单的例子,假如我们现在需要编写两个指令,在linking函数中有很多重合的方法,为了避免重复自己(著名的DRY原则),我们可以将这个重复的方法写在第三个指令的controller中,然后在另外两个需要的指令中require这个拥有controller字段的指令,最后通过linking函数的第四个参数就可以引用这些重合的方法。代码的结构大致如下: var app = angular.modeule('myapp',[]); app.directive'common'function({ return { .. controller: ($scope{ this.method1 = { }; this.method2 ; . } 'd1'. require: '?^common'(scope{ scope= common.method1; . 'd2'; 当然,上面例子只是指令中controller用法的一种。虽然一般来说,使用controller字段的机会不是很多,但是想要写好AngularJS的指令,这是必须要掌握的一点。 显然,controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编写,使用起来比较简单;另一种方法则是require AngularJS内建的指令,其中大部分时间需要require的都是ngModel这个指令。很多时候,由于我们对ngModel中内建的方法和属性不熟悉,在阅读和编写代码时会有一些困难。今天我们的目的就是详细的介绍ngModel中的内建属性和方法,相信在认真的阅读完本文之后,你一定能够熟练的在指令中require ngModel。 在Angular应用中,ng-model指令时不可缺少的一个部分,它用来将视图绑定到数据,是双向绑定魔法中重要的一环。ngModelController则是ng-model指令中所定义的controller。这个controller包含了一些用于数据绑定,验证,CSS更新,以及数值格式化和解析的服务。它不用来进行DOM渲染或者监听DOM事件。与DOM相关的逻辑都应该包含在其他的指令中,然后让这些指令来试用ngModelController中的数据绑定功能。 下面,我们将用一个例子来说明如何在自定义指令中require ngModel。在这里例子中,我们使用HTML5中的contenteditable属性来制作了一个简单的编辑器指令,同时将在指令定义中require了ngModel来进行数据绑定。
<form name="myForm"> <div contenteditable name"myWidget" ng-model"userContent" strip-br"true" required>Change me!</div> <span ng-show"myForm.myWidget.$error.required">Required/span<hr<textarea ng"userContent">/textarea> /form>
angular.module('customControl',[]). directive('contenteditable',function() { return { restrict: 'A',// 作为元素属性 require: '?ngModel',// 获取ngModelController link: function(scope,element,attrs,ngModel) { if(!ngModel) return; // 如果没有ng-model则什么都不做 // 指定UI的更新方式 ngModel.$render ) { element.html(ngModel.$viewValue || ''; // 监听change事件来开启绑定 element.on'blur keyup change'{ scope.$apply(read; read(; // 初始化 // 将数据写入model function read{ var html = element; // 当我们清空div时浏览器会留下一个<br>标签 // 如果制定了strip-br属性,那么<br>标签会被清空 if( attrs.stripBr && html == '<br>' { html = ; } ngModel.$setViewValue(html} }); |