指令续<AngularJs>

标签：style   blog   io   color   ar   os   使用   sp   for   

compile【object or function】

compile选项本身并不会被频繁使用，但是link函数则会被经常使用。本质上，当我们设置了link选项，实际上是创建了一个postLink() 链接函数，以便compile() 函数可以定义链接函数。通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。

compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。

编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。 在作用域同DOM链接之前可以手动操作DOM。在实践中，编写自定义指令时这种操作是非常罕见的，但有几个内置指令提供了这样的功能。 

link

compile: function(tEle, tAttrs, transcludeFn) {
 //todo:
 return function(scope, ele, attrs) {
 // 链接函数
 };

链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义时，编译函数会重载链接函数。如果我们的指令很简单，并且不需要额外的设置，可以从工厂函数（回调函数）返回一个函数来代替对象。如果这样做了，这个函数就是链接函数。

ngModel

它提供更底层的API来处理控制器内的数据,这个API用来处理数据绑定、验证、 CSS更新等不实际操作DOM的事情,ngModel 控制器会随 ngModel 被一直注入到指令中，其中包含了一些方法。为了访问ngModelController必须使用require设置.

ngModelController常用的元素如下：

•  1.为了设置作用域中的视图值，需要调用 ngModel.$setViewValue() 函数。

$setViewValue() 方法适合于在自定义指令中监听自定义事件（比如使用具有回调函数的jQuery插件），我们会希望在回调时设置$viewValue并执行digest循环。

 angular.module(‘myApp‘)
        .directive(‘myDirective‘, function() {
            return {
                require: ‘?ngModel‘,
                link: function(scope, ele, attrs, ngModel) {
                    if (!ngModel) return;
                    $(function() {
                        ele.datepicker({
                              //回调函数
                            onSelect: function(date) {
                                // 设置视图和调用 apply
                                scope.$apply(function() {
                                    ngModel.$setViewValue(date);
                                });
                            }
                        });
                    });
                }
            };
        });

• 2.$render方法可以定义视图具体的渲染方式
• 3.属性
  1. $viewValue
  $viewValue属性保存着更新视图所需的实际字符串。
  2. $modelValue
  $modelValue由数据模型持有。 $modelValue和$viewValue可能是不同的，取决于$parser流水线是否对其进行了操作。
  3. $parsers
  $parsers 的值是一个由函数组成的数组，其中的函数会以流水线的形式被逐一调用。ngModel 从DOM中读取的值会被传入$parsers中的函数，并依次被其中的解析器处理。
  4. $formatters
  $formatters的值是一个由函数组成的数组，其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。它和$parser流水线互不影响，用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。
  5. $viewChangeListeners
  $viewChangeListeners的值是一个由函数组成的数组，其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。通过$viewChangeListeners，可以在无需使用$watch的情况下实现类似的行为。由于返回值会被忽略，因此这些函数不需要返回值。
  6. $error
  $error对象中保存着没有通过验证的验证器名称以及对应的错误信息。
  7. $pristine
  $pristine的值是布尔型的，可以告诉我们用户是否对控件进行了修改。
  8. $dirty
  $dirty的值和$pristine相反，可以告诉我们用户是否和控件进行过交互。
  9. $valid
  $valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false， 没有错误时值为true。
  10. $invalid
  $invalid值可以告诉我们当前控件中是否存在至少一个错误，它的值和$valid相反。 未完待续....

　　　　 备注：我也是刚刚开始学习，这一篇总结的不好，好多细节还需掌握好再次回顾补充，如果你喜欢本文的话，推荐共勉，谢谢！

指令续<AngularJs>

标签：style   blog   io   color   ar   os   使用   sp   for   

原文地址：http://www.cnblogs.com/rohelm/p/4101744.html