angular指令心得（ng-model）

在项目中编写指令，常常会依赖其他的指令来实现想要达到的功能，其中最常用到的便是ng-model，它为我们明确了需要绑定的属性，虽然在指令中可以通过通过使用独立作用域的”=”来进行双向绑定，但使用ng-model更能简化指令的传值，符合angular的使用习惯。

指令依赖

angular中编写自定义指令是通过require属性来指定查找依赖指令的controller，并传入link函数中进行调用.

.directive("...",function(){return {...require:'ngModel',link:function(scope,elem,attr,ngModelCtr){...}...}
})

所依赖指令的控制器被传入link的第四个参数中，可以依赖多个指令，此时第四个参数则是个数组。

.directive("...",function(){return {...require:['ngModel','^?form',...],link:function(scope,elem,attr,ctrls){...}...}
})

在查找指令的过程中,如果未找到指令，则会抛出一个编译错误。
可以通过加前缀来控制其查找的操作。

前缀	作用
^	向上查找指令，未找到则报错。
?	未找到，取消报错，将null传到link的第四个参数。

ng-model

使用ng-model前，让我们先简单了解一下ng-model的工作原理。

angular是一个mvvm的框架，其主要就体现在ng-model身上

angular将model和view之间的联系切断，自己内部通过ng-model去实现ViewModel层，具体的细节不表，我们就看下我们要用的部分。

在每个使用ng-model的地方，都会创建一个ngModelController实例，这个实例负责管理存储在模型（由model指定）中的值与元素显示值之间的数据绑定。

ngModelController包含有$formatters和$parsers数组,会在每次更新数据绑定是调用。

当我们从页面或通过$setViewValue改变绑定的属性时，会遍历执行$parsers数组里面的方法，而当我们直接在js里面通过赋值语句修改时，则会调用$formatters数组。

// line number:25332
// model -> value// Note: we cannot use a normal scope.$watch as we want to detect the following:// 1. scope value is 'a'// 2. user enters 'b'// 3. ng-change kicks in and reverts scope value to 'a'//    -> scope value did not change since the last digest as//       ng-change executes in apply phase// 4. view should be changed back to 'a'$scope.$watch(function ngModelWatch() {var modelValue = ngModelGet($scope);// 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.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;ctrl.$render();ctrl.$$runValidators(modelValue, viewValue, noop);}}return modelValue;});
}];

上面是angular调用$formatters的地方，它监控了model值的变化，负责model->view。

实践

<html lang="en" ><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>angular-ngModel-test</title><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"></script><script type="text/javascript">angular.module("testModule",[]).controller("testCtr",function($scope){}).directive("testDire",function(){return {restrict:"A",require:"ngModel",link:function(scope,elem,attr,ngModelCtr){}}}) </script>
</head><body ng-app="testModule" ng-controller="testCtr"><input type="text" test-dire ng-model="say"/><h1>{{say}}</h1></body></html>

$formatters & $parsers

$formatters

上面搭建了一个基本的架子，现在我们通过来通过js改变模型值，在$formatters里面加入一个格式化方法来显示到页面上。

改动：

<!-- html -->
<body ng-app="testModule" ng-controller="testCtr"><input type="text" test-dire ng-model="say"/><button ng-click="joke()">窗前明月光</button><h1>{{say}}</h1
</body>

//js
.directive("testDire",function(){return {restrict:"A",require:"ngModel",link:function(scope,elem,attr,ngModelCtr){ngModelCtr.$formatters.push(function(modelValue){if(typeof modelValue != "undefined"){//返回字符串给view,不改变模型值return "李白睡的香"; }})}}
})

效果图：

这里有个很奇怪的现象，两个绑定model的地方显示的值不一样，这是因为input是从ngModelController中获得的返回值显示出来的，这个值在通过$formatters数组时被我拦截下来，返回了另外一个字符串。

$parsers

我们还可以对界面（view）输入后的值进行处理。

改动：

//js
.directive("testDire",function(){return {restrict:"A",require:"ngModel",link:function(scope,elem,attr,ngModelCtr){...ngModelCtr.$parsers.push(function(viewValue){if(typeof viewValue != "undefined"){return "我说："+viewValue;}})}}
})

效果图：

$render & $setViewValue

$render

有的时候，$formatters数组里面也许会有不止一个方法，这时候为了保证一个最终的显示效果，就应该用到$render方法。
TIP:$render总会在$formatters完成之后调用。

重新赋值$render方法，在改变模型值后修改字体颜色。

改动：

//js
.directive("testDire",function(){return {restrict:"A",require:"ngModel",link:function(scope,elem,attr,ngModelCtr){...var h1Elem = document.getElementsByTagName("h1")[0];ngModelCtr.$render = function(){if(typeof scope.say != "undefined"){h1Elem.style.color = "red";}}}}
})

效果图：

结果可以看到，颜色成功改变了，但是输入框没有变化。
造成这个的原因是因为我们重写了$render方法，相当于改写了ng-model从model到view的dom操作，用自己的方式去实现。

$setViewValue

的作用是为了在指令中改变ng-model绑定的值，适用于使用了独立作用域的指令(在没有双向绑定属性的情况下，无法通过scope进行赋值)。

下面在加载自执行的时候通过指令改变模型值。

改动：

//js.directive("testDire",function(){return {restrict:"A",require:"ngModel",link:function(scope,elem,attr,ngModelCtr){...ngModelCtr.$setViewValue("hello");}}
})

效果图：

总结

在指令中，我们可以用通过简单的依赖ng-model去实现angular各种其他插件的兼容（如一些日期控件，富文本编辑器等），更能简化我们的指令代码，避免很多复杂的绑定逻辑，特别要注意的是$formatters,$passers,$render这些都会在初始化时去执行一遍，因此应该根据需要做好判断操

转http://blog.csdn.net/qq_17371033/article/details/49248791