Angular2表单自定义验证器的实现
字体：[ ] 类型：转载 时间：
本文给大家介绍angular2表单自定义验证器的实现，本文给大家介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
本文主要给大家介绍如何判断验证器的结果。在这里，我们就来看看怎样实现一个自定义的验证器。
我们要实现一个验证手机号的验证器，使用的实例还是基于之前的文章里面的实例，也就是用户信息输入的表单页面。我们在手机号的元素上添加一个验证手机号的验证器。然后，如果手机号验证失败，就显示一个错误，页面如下：
这部分教程的代码可以从github获取:
如果要运行，进入项目目录，运行下面的命令安装依赖然后运行测试服务器：
cd angular2-forms-tutorial
git checkout model-driven # 检出该文所使用的tag
npm install
实现验证器
在Angular2中，实现一个验证器非常简单，就是一个方法就可以，该方法的参数是一个FormControl，结果是一个错误对象或者null。用TypeScript接口表示，就是这样：
interface Validator&T extends FormControl& {
(c:T): {[error: string]:any};
如果是对类似Java这样的面向对象语言比较了解的话，上面的接口定义就很容易理解。其中&T extends FormControl&是指这个方法中用到一个泛型T，它是一个继承自FormControl的对象。(c:T): {[error: string]:any};这是一个lambda表达式的方法定义，参数c的类型为T，这个方法返回一个对象。
我们创建一个名为mobile.validator.ts的文件，它的内容如下：
import { FormControl } from '@angular/forms';
export function validateMobile(c: FormControl) {
let MOBILE_REGEXP = /^1[0-9]{10,10}$/;
return MOBILE_REGEXP.test(c.value) ? null : {
validateMobile: {valid: false}
在这个验证方法里，参数c的类型为FormControl，也就是表单控件，他有一个value属性，存放当前的值。我们使用正则表达式，来判断这个值是否合法。如果不合法，就返回一个对象。
在之前的教程中，我们对验证器的验证结果是这样获得的：
&p *ngIf="userForm.controls.mobile?.errors?.required"&必须输入电话&/p&
userForm.controls.mobile就是表单中手机号这个控件，required是required验证器对应的key，当required验证器验证失败时，就会在errors里面添加一个值：
required: {valid: false}
所以，我们实现的自定义的验证器，也要把验证结果用验证器的名字作为key，放到errors里面，就是这样：
validateMobile: {valid: false}
这样，我们就能够在页面中用跟之前同样的方式来获得这个验证器的验证结果。
在模型驱动的表单里添加验证器
接下来，我们把我们实现的验证器添加到我们的表单里，先加到模型驱动的表单里：
import { validateMobile } from '../validators/mobile.validator';
export class ReactiveFormsComponent implements OnInit {
this.userForm = this.formBuilder.group({
// ... 省略其他控件
mobile: [, [Validators.required, Validators.minLength(11), Validators.maxLength(11), validateMobile]]
上面的代码省略了其他的部分，完整的代码，请参考github。
在上面的代码中，我们引入了之前实现的自定义的验证器，然后在表单控件创建代码中，对mobile控件加了一个validateMobile。
这样，我们在页面上添加相应的验证结果信息：
&p *ngIf="userForm.controls.mobile.errors?.validateMobile"&电话号码格式不正确&/p&
这样就完成了验证器，以及在页面显示验证结果，就这么简单。
在模板驱动的表单里添加验证器
但是，如果我们的表单不是在组件里用模型驱动的方式创建的，而是在页面上用html元素创建的，那么使用自定义的验证器就稍微麻烦一点。
在一个模板驱动的表单里，我们是这样使用验证器的：
&input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11"&
&span *ngIf="mobile.valid"&有效&/span&
&div [hidden]="mobile.valid || mobile.pristine"&
&p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength"&电话长度必须为11&/p&
&p *ngIf="mobile.errors?.required"&必须输入姓名&/p&
也就是在input输入元素的属性中添加验证器。那么，我们要实现自己的验证器在表单里面使用，除了上面的验证器方法里面，还需要2件事情：
我们需要将这个验证器定义成一个指令Directive，这样Angular在解析这段html的时候，会识别我们自定义的验证器指令。
我们还需要Angular的验证器调用我们的验证方法。
所以，在之前的mobile.validator.ts文件里，添加下面的指令定义：
@Directive({
selector: '[validateMobile][ngModel]'
export class MobileValidator {}
这段代码很简单，就是用@Directive标签定义了一个指令MobileValidator，它作用的元素是同时具有validateMobile和ngModel属性的元素。这样，我们就可以在手机号的元素上添加一个属性，来使这个验证器指令起作用。
然后，我们还需要Angular的验证器框架能够调用我们的验证方法，这就需要NG_VALIDATORS。我们修改上面的验证器的指令定义如下：
@Directive({
selector: '[validateMobile][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useValue: validateMobile, multi: true }
export class MobileValidator {}
这样Angular的验证器就能够将validateMobile方法应用在这个指令上。
最后，我们再把这个新的指令，添加到AppModule的declarations里面，就可以在页面上使用这个验证器了。
最后，页面上使用验证器的代码如下：
&input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11" validateMobile&
&span *ngIf="mobile.valid"&有效&/span&
&div [hidden]="mobile.valid || mobile.pristine"&
&p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength"&电话长度必须为11&/p&
&p *ngIf="mobile.errors?.required"&必须输入姓名&/p&
&p *ngIf="mobile.errors?.validateMobile"&电话号码格式不正确&/p&
以上所述是小编给大家介绍的Angular2表单自定义验证器，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具iampomelo 的BLOG
用户名：iampomelo
文章数：32
访问量：4644
注册日期：
阅读量：5863
阅读量：12276
阅读量：423748
阅读量：1112183
51CTO推荐博文
& & & &AngularJS中除了内置指令，还可以自定义指令。自定义指令和自定义过滤器一样，有两种方法：第一种，在module中配置：$compileProvider.directive('directiveName', function(){ });& & & &代码模版为：&&&&$compileProvider.directive('',&['',&function(){
&&&&//&Runs&during&compile
&&&&return&{
&&&&&&&&//&name:&'',
&&&&&&&&//&priority:&1,
&&&&&&&&//&terminal:&true,
&&&&&&&&//&scope:&{},&//&{}&=&isolate,&true&=&child,&false/undefined&=&no&change
&&&&&&&&//&controller:&function($scope,&$element,&$attrs,&$transclude)&{},
&&&&&&&&//&require:&'ngModel',&//&Array&=&multiple&requires,&?&=&optional,&^&=&check&parent&elements
&&&&&&&&//&restrict:&'A',&//&E&=&Element,&A&=&Attribute,&C&=&Class,&M&=&Comment
&&&&&&&&//&template:&'',
&&&&&&&&//&templateUrl:&'',
&&&&&&&&//&replace:&true,
&&&&&&&&//&transclude:&true,
&&&&&&&&//&compile:&function(tElement,&tAttrs,&function&transclude(function(scope,&cloneLinkingFn){&return&function&linking(scope,&elm,&attrs){}})),
&&&&&&&&link:&function($scope,&iElm,&iAttrs,&controller)&{
&&&&&&&&&&&&
&&&&};& & & &第二种，.directive('directiveName', function(){ });& & & &代码模版为：&&&&&&&&.directive('',&['',&function(){
&&&&&&&&&&&&//&Runs&during&compile
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&//&name:&'',
&&&&&&&&&&&&&&&&//&priority:&1,
&&&&&&&&&&&&&&&&//&terminal:&true,
&&&&&&&&&&&&&&&&//&scope:&{},&//&{}&=&isolate,&true&=&child,&false/undefined&=&no&change
&&&&&&&&&&&&&&&&//&controller:&function($scope,&$element,&$attrs,&$transclude)&{},
&&&&&&&&&&&&&&&&//&require:&'ngModel',&//&Array&=&multiple&requires,&?&=&optional,&^&=&check&parent&elements
&&&&&&&&&&&&&&&&//&restrict:&'A',&//&E&=&Element,&A&=&Attribute,&C&=&Class,&M&=&Comment
&&&&&&&&&&&&&&&&//&template:&'',
&&&&&&&&&&&&&&&&//&templateUrl:&'',
&&&&&&&&&&&&&&&&//&replace:&true,
&&&&&&&&&&&&&&&&//&transclude:&true,
&&&&&&&&&&&&&&&&//&compile:&function(tElement,&tAttrs,&function&transclude(function(scope,&cloneLinkingFn){&return&function&linking(scope,&elm,&attrs){}})),
&&&&&&&&&&&&&&&&link:&function($scope,&iElm,&iAttrs,&controller)&{
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&};
&&&&&&&&}]);& 可以看到，定义指令会返回一个对象，这个对象里面包含了各个属性（选项），这些属性（选项）就是用来定义指令的。& & &指令的名字不要和内置指令冲突，如果指令的名字为xxx-yyy，那么设置指令的名字时应为xxxYyy，即驼峰式的命名。restrict: 描述指令在模版中的使用方式，包括：元素、样式类、属性、注释，或者以上几种方式的任意组合。template: 以字符串的形式编写一个内联模板。templateUrl:&加载模版所需要使用的url，如果已经指定了template，此属性会被忽略。replace:&如果该属性为true，则替换指令所在的元素；如果为false或者不指定，则追加到元素内部。例子：&!DOCTYPE&html&
&html&ng-app="firstMoudule"&
&&&&&meta&charset='utf-8'&
&body&ng-controller="firstController"&
&&&&&!--&使用自定义指令first-tag&--&
&&&&&div&first-tag&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('firstMoudule',&[],&function($compileProvider,&$controllerProvider)&{
&&&&&&&&$compileProvider.directive('firstTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'A',&//&E&=&Element,&A&=&Attribute,&C&=&Class,&M&=&Comment
&&&&&&&&&&&&&&&&template:&'&div&hello&pomelo!&/div&',
&&&&&&&&&&&&&&&&replace:&true
&&&&&&&&&&&&};
&&&&&&&&});
&&&&&&&&$controllerProvider.register('firstController',&function()&{});
&&&&&/script&
&/html&transclude:&当此属性为true时，把指令元素中原来的子节点移动到一个新模板的内部。例子：&!DOCTYPE&html&
&html&ng-app="firstMoudule"&
&&&&&meta&charset='utf-8'&
&body&ng-controller="firstController"&
&&&&&div&first-tag&
&&&&&&&&old&data&&&&&&&&&
&&&&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('firstMoudule',&[],&function($compileProvider,&$controllerProvider)&{
&&&&&&&&$compileProvider.directive('firstTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'A',&//&E&=&Element,&A&=&Attribute,&C&=&Class,&M&=&Comment
&&&&&&&&&&&&&&&&/*transclude为true时，old&data会被放到具有ng-transclude属性的地方，也就是下面的span*/
&&&&&&&&&&&&&&&&template:&'&div&new&data&&span&ng-transclude&&/span&&&/div&',
&&&&&&&&&&&&&&&&replace:&true,
&&&&&&&&&&&&&&&&transclude:&true
&&&&&&&&&&&&};
&&&&&&&&});
&&&&&&&&$controllerProvider.register('firstController',&function()&{});
&&&&&/script&
&/html&输出priority:&设置指令在模板中的优先级，用整数来表示，数字大的优先级高，先执行。执行顺序是相对于元素上的其它指令而言的。如果两个指令的该值相同，则先定义的先执行。比如内置的ng-repeat该值为1000。terminal:&和priority配合使用。如果此属性为true，那么priority比它小的都不会再执行。例子：&!DOCTYPE&html&
&html&ng-app="firstMoudule"&
&&&&&meta&charset='utf-8'&
&body&ng-controller="firstController"&
&&&&&!--&同时使用两个指令&--&
&&&&&div&first-tag&second-tag&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('firstMoudule',&[],&function($compileProvider,&$controllerProvider)&{
&&&&&&&&$compileProvider.directive('firstTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'A',
&&&&&&&&&&&&&&&&priority:&10
&&&&&&&&&&&&};
&&&&&&&&});
&&&&&&&&$compileProvider.directive('secondTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&template:&'&div&data&/div&',
&&&&&&&&&&&&&&&&replace:&true,
&&&&&&&&&&&&&&&&transclude:&true,
&&&&&&&&&&&&&&&&priority:&20,
&&&&&&&&&&&&&&&&terminal:&true
&&&&&&&&&&&&};
&&&&&&&&});
&&&&&&&&$controllerProvider.register('firstController',&function()&{});
&&&&&/script&
&/html&& 注意，这里同时使用两个指令，只能有一个里面template有内容，否则将出错。second-tag优先级较高，先执行，并且terminal为true，first-tag不会执行。complie、link：虽然template的方式很有用，但对于指令来说，真正有趣的发生在complie和link函数中。这两个函数是根据Angular创建动态视图的两个处理阶段来命名的。Angular的初始化过程为：& & 1.加载脚本 加载Angular库，查找ng-app指令，从而找到应用的边界。& & 2.编译阶段 遍历DOM结构，标识出模版中注册的所有指令。对于每一条指令，如果存在complie函数，则调用complie函数得到一个编译好的template函数，template函数又会调用从所有指令收集来的link函数。编译阶段就是负责模板的转换。& & 3.链接阶段 为了让视图变成动态的，Angular会对每一条指令运行一个link函数。link函数负责在model和view之间进行动态关联。& & complie函数仅仅在编译阶段运行一次，而link函数对于指令的每一个实例，都会执行一次。& & 对于我们会编写的大多数指令来说，并不需要对模板转换，只有编写link函数即可。有complie函数就不用再定义link函数了。& &&complie函数的语法为：& & 这里返回的相当于link函数。compile:&function(tElement,&tAttrs,transclude)&{
&&&&&&&&&return&{
&&&&&&&&&&&pre:&function&preLink()&{&},
&&&&&&&&&&&post:&function&postLink()&{&}
&&&&&&&&&&};
}& & tElement是当前指令所在的jQuery对象。tAttrs是指令上定义的参数，比如指令fisrt-tag="123"，则tAttrs为123 。这里transclude是一个函数，如果需要对内容进行变换，而简单的基于模板的变换并没有提供这种功能，那么可以自己写这个函数。& & 如果直接返回，则返回的是postLink，如下：compile:&function(tElement,&tAttrs,transclude)&{
&&&&&&&&&return&function()&{&};
}& & preLink在编译阶段之后，指令链接子元素之前运行。postLink在所有的子元素指令都链接后才运行。如果需要修改DOM结构，应该在postLink里面做这件事情，如果在preLink里面做则会破坏绑定过程，并导致错误。例子&!DOCTYPE&html&
&&&&&meta&charset="utf-8"&
&body&ng-app="app"&
&&&&&div&ng-controller="Controller1"&
&&&&&&&&&div&tag1&tag2&&/div&
&&&&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('app',&[],&function($compileProvider)&{
&&&&&&&&&&&&$compileProvider.directive('tag1',&function()&{
&&&&&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&&&&&restrict:&'A',
&&&&&&&&&&&&&&&&&&&&template:&'&div&hello&pomelo!&/div&',
&&&&&&&&&&&&&&&&&&&&replace:&true,
&&&&&&&&&&&&&&&&&&&&compile:&function(tElement,&tAttrs,&transclude)&{
&&&&&&&&&&&&&&&&&&&&&&&&console.log('tag1&complie...');
&&&&&&&&&&&&&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&pre:&function&preLink()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log('tag1&preLink...');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&post:&function&postLink()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log('tag1&postLink...');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&});
&&&&&&&&&&&&$compileProvider.directive('tag2',&function()&{
&&&&&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&&&&&restrict:&'A',
&&&&&&&&&&&&&&&&&&&&replace:&false,
&&&&&&&&&&&&&&&&&&&&compile:&function(tElement,&tAttrs,&transclude)&{
&&&&&&&&&&&&&&&&&&&&&&&&console.log('tag2&complie...');
&&&&&&&&&&&&&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&pre:&function&preLink()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log('tag2&preLink...');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&post:&function&postLink()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log('tag2&postLink...');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&});
&&&&&&&&})
&&&&&&&&.controller('Controller1',&function()&{});
&&&&&/script&
&/html&controller、controllerAs、require：controller会暴露一个API，通过这个API可以在多个指令之间通过依赖注入进行通信。controllerAs是给controller起一个别名，方便使用。require可以将其它指令传递给自己。例子：&!DOCTYPE&html&
&&&&&meta&charset="utf-8"&
&body&ng-app="app"&
&&&&&div&ng-controller="Controller1"&
&&&&&&&&&div&tag1&&/div&
&&&&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('app',&[],&function($compileProvider)&{
&&&&&&&&&&&&$compileProvider.directive('tag1',&function()&{
&&&&&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&&&&&restrict:&'A',
&&&&&&&&&&&&&&&&&&&&controller:&function($scope)&{
&&&&&&&&&&&&&&&&&&&&&&&&$scope.data&=&'this&is&the&data&in&controller';
&&&&&&&&&&&&&&&&&&&&&&&&this.Data&=&'some&Data';
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&controllerlAs:&'Controller',
&&&&&&&&&&&&&&&&&&&&link:&function($scope,&iElm,&iAttrs,&Controller)&{
&&&&&&&&&&&&&&&&&&&&&&&&console.log($scope.data);
&&&&&&&&&&&&&&&&&&&&&&&&console.log(Controller.Data);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&});
&&&&&&&&})
&&&&&&&&.controller('Controller1',&function()&{});
&&&&&/script&
&/html&& 在多个指令间通信还需要require方法。例子：&!DOCTYPE&html&
&&&&&meta&charset="utf-8"&
&body&ng-app="app"&
&&&&&div&ng-controller="Controller1"&
&&&&&&&&&div&parent-tag&&/div&
&&&&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('app',&[])
&&&&&&&&.directive('parentTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'ECMA',
&&&&&&&&&&&&&&&&template:&'&div&&ul&&li&ng-repeat="i&in&players"&{{i.name}}&{{i.number}}&/li&&/ul&&child-tag&&/child-tag&&/div&',
&&&&&&&&&&&&&&&&replace:&true,
&&&&&&&&&&&&&&&&controller:&function($scope)&{
&&&&&&&&&&&&&&&&&&&&$scope.players&=&[{
&&&&&&&&&&&&&&&&&&&&&&&&name:&'Mertersacker',
&&&&&&&&&&&&&&&&&&&&&&&&number:&4
&&&&&&&&&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&&&&&&&&&name:&'Koscielny',
&&&&&&&&&&&&&&&&&&&&&&&&number:&6
&&&&&&&&&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&&&&&&&&&name:&'Gabriel',
&&&&&&&&&&&&&&&&&&&&&&&&number:&5
&&&&&&&&&&&&&&&&&&&&}];
&&&&&&&&&&&&&&&&&&&&this.addPlayer&=&function()&{
&&&&&&&&&&&&&&&&&&&&&&&&$scope.$apply(function()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$scope.players.push({
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&name:&'Chambers',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&number:&21
&&&&&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&controllerAs:&'parentController'
&&&&&&&&&&&&};
&&&&&&&&})
&&&&&&&&.directive('childTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'ECMA',
&&&&&&&&&&&&&&&&require:&'^parentTag',
&&&&&&&&&&&&&&&&template:&'&button&add&player&Chambers&/button&',
&&&&&&&&&&&&&&&&replace:&true,
&&&&&&&&&&&&&&&&link:&function($scope,&iElm,&iAttrs,&parentController)&{
&&&&&&&&&&&&&&&&&&&&iElm.on('click',&parentController.addPlayer);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})
&&&&&&&&.controller('Controller1',&function()&{});
&&&&&/script&
&/html&scope：指明指令所操控数据的作用域。& & 如果不指定，scope为false，会使用指令对应的DOM元素上存在的scope对象；& & 如果scope为true，则会创建一个scope，它继承了外层控制器中的scope，在继承树中，位于当前scope对象上方的所有scope对象的值都可以被读取。& & 如果scope为{attributeName:'bindingStratry',... ...}即一个对象时，会创建一个独立的对象。& & 对于scope是一个object的情况，有点复杂。此时scope的结构为：& & scope:{& & & & & &attributeName1:'&bindingStratry1',& & & & & &attributeName2:'=bindingStratry2',& & & & & &attributeName3:'@bindingStratry3'& & }& & 当为&bindingStratry时，表示传递一个来自父scope的函数，稍后调用。例子：&!DOCTYPE&html&
&&&&&meta&charset="utf-8"&
&body&ng-app="app"&
&&&&&div&ng-controller="Controller1"&
&&&&&&&&&div&my-tag&obj="players"&&/div&
&&&&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('app',&[])
&&&&&&&&.directive('myTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'ECMA',
&&&&&&&&&&&&&&&&controller:&function($scope)&{
&&&&&&&&&&&&&&&&&&&&console.log($scope.myScopeFn());//myScopeFn必须以函数方法使用
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&scope:&{
&&&&&&&&&&&&&&&&&&&&myScopeFn:&'&obj'
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})
&&&&&&&&.controller('Controller1',&function($scope)&{
&&&&&&&&&&&&$scope.players&=&[{
&&&&&&&&&&&&&&&&name:&'Mertersacker',
&&&&&&&&&&&&&&&&number:&4
&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&name:&'Koscielny',
&&&&&&&&&&&&&&&&number:&6
&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&name:&'Gabriel',
&&&&&&&&&&&&&&&&number:&5
&&&&&&&&&&&&}];
&&&&&&&&});
&&&&&/script&
&/html& & &当为=bindingStratry时，表示传递一个来自父scope的属性，并且是和父scope中对应属性双向绑定的。例子：&!DOCTYPE&html&
&&&&&meta&charset="utf-8"&
&body&ng-app="app"&
&&&&&div&ng-controller="Controller1"&
&&&&&&&&&div&my-tag&obj="players"&&/div&
&&&&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('app',&[])
&&&&&&&&.directive('myTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'ECMA',
&&&&&&&&&&&&&&&&controller:&function($scope)&{
&&&&&&&&&&&&&&&&&&&&&!--&双向数据绑定，可以操纵父scope的数据，这里添加一个元素进去&--&
&&&&&&&&&&&&&&&&&&&&$scope.myScopeAttr.push({
&&&&&&&&&&&&&&&&&&&&&&&&name:&'Ozil',
&&&&&&&&&&&&&&&&&&&&&&&&number:&11
&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&scope:&{
&&&&&&&&&&&&&&&&&&&&myScopeAttr:&'=obj'
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})
&&&&&&&&.controller('Controller1',&function($scope)&{
&&&&&&&&&&&&$scope.players&=&[{
&&&&&&&&&&&&&&&&name:&'Mertersacker',
&&&&&&&&&&&&&&&&number:&4
&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&name:&'Koscielny',
&&&&&&&&&&&&&&&&number:&6
&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&name:&'Gabriel',
&&&&&&&&&&&&&&&&number:&5
&&&&&&&&&&&&}];
&&&&&&&&&&&&console.log($scope.players);
&&&&&&&&});
&&&&&/script&
&/html&& & 可以看到，父scope中players的数据改变了。=bindingStratry能双向数据绑定。& & 当为@bindingStratry时，表示读取一个来自父scope的属性，这个属性只读，无法改变。例子：&!DOCTYPE&html&
&&&&&meta&charset="utf-8"&
&body&ng-app="app"&
&&&&&div&ng-controller="Controller1"&
&&&&&&&&&!--&这里要特别注意，要放在{{&}}里&--&
&&&&&&&&&div&my-tag&obj="{{players}}"&&/div&
&&&&&/div&
&&&&&script&src="/angular.js/1.4.0-rc.2/angular.min.js"&&/script&
&&&&&script&type="text/javascript"&
&&&&angular.module('app',&[])
&&&&&&&&.directive('myTag',&function()&{
&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&restrict:&'ECMA',
&&&&&&&&&&&&&&&&controller:&function($scope)&{
&&&&&&&&&&&&&&&&&&&&console.log($scope.myScopeAttr);
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&scope:&{
&&&&&&&&&&&&&&&&&&&&myScopeAttr:&'@obj'
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&})
&&&&&&&&.controller('Controller1',&function($scope)&{
&&&&&&&&&&&&$scope.players&=&[{
&&&&&&&&&&&&&&&&name:&'Mertersacker',
&&&&&&&&&&&&&&&&number:&4
&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&name:&'Koscielny',
&&&&&&&&&&&&&&&&number:&6
&&&&&&&&&&&&},&{
&&&&&&&&&&&&&&&&name:&'Gabriel',
&&&&&&&&&&&&&&&&number:&5
&&&&&&&&&&&&}];
&&&&&&&&});
&&&&&/script&
&/html& & &值得一提的是，@bindingStratry是把当前属性作为一个字符串传递，所以对象等引用类型传过来会变成字符串，最好还是传字符串类型的数据过来。
了这篇文章
类别：┆阅读(0)┆评论(0)