zoukankan      html  css  js  c++  java
  • Angularjs之directive指令学习笔记(二)

     

    1.Directive的五个实例知道driective作用、其中字段restrict、template、 replace、transclude、link用法

     

    参考文章链接地址:http://damoqiongqiu.iteye.com/blog/1917971

       1.指令(directive)的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 ,如同博客中的自定义的<hello>标签

      2.directive中几个属性的介绍:

      ①restrict:表明指令的声明方式,选项E(元素Element),A(属性Attribute),C(样式类Class),M(注释Comment)

      ②template/templateUrl:替换自定义元素的html的标签及内容 

      ③replace:true/false :决定自定义标签的显示及隐藏

      ④transclude:true决定自定义标签内子标签的内容的显示处理,此时<hello>标签里的内容保持不变

      ⑤link:一些事件需要绑定到某个元素上,那么你需要提供一个link函数


     

    http://www.cnblogs.com/jimmychange/p/3498906.html

    compile:  在directive中如果需要对DOM元素进行处理,基本都是在这个函数中进行。仔细看这个函数,compile并不能访问scope,

    link:此函数的主要作用就是对DOM和scope做数据绑定。和compile不同,在这个函数中,已经可以访问scope了。
    template和templateUrl:用于指定directive对应的模板,前者直接使用字符串定义模板,而后者则通过url链接外部模板文件。在模板中可以使用对应controller或者rootScope中的scope,当然也有例外,具体请看关于scope的解释。
    replace:指定是否使用模板替换directive作用的DOM元素。
    priority:指定优先级,angular在处理directive时,会将页面出现的所有directive按优先级排序,一般这个数值都是不指定的。
    controller:directive对应的controller,通常用于directive之间的通信。在这个函数中,所有绑定到this上的变量,其他的directive都能通过使用require来进行访问。
    require:通过指定某个directive的名字,来访问其对应的controller。其中以?作为前缀时,如果找不到此directive将报错,而以^为前缀,将会在父元素进行递归查找,可以使用数组来引入多个directive,如['directive1','directive2','directive3']
    scope:用于指定当前directive所对应的scope,不同的取值之间的影响非常大。

    1. false:此时directive与父元素共享scope
    2. true:此时directive有自己的scope,该scope继承父元素所对应的scope
    3. isolate:directive有自己的scope,该scope不会继承自父元素对应的scope,但是仍然可以通过scope.$parent访问父节点的scope。这不是一个推荐的做法,因为这样就对父元素进行了限制,影响了directive的使用范围。如果想在父子元素之间共享数据,可以明确指定那些元素需要父子之间共享。方法共有三种:
    使用@将父级scope中的属性绑定到本地scope中,单向绑定,这个值总是字符串,在template中需要使用{{}}
    使用=同上,只不过这里是双向绑定,在template中可以直接给出父级scope的属性名称
    使用&用于倒入函数或者表达式

    transclude:用于控制是否要将该directive的子元素添加到模板中ng-tranclude指定的元素之下

     


     

    2.Angularjs指令directive之require和了$parsers这个属性和$setValidity()方法 

    http://hudeyong926.iteye.com/blog/2074238 

    在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.eg:require:’ngModel’引用内置指令require: '?^common'引用自定义指令

    引用内置指令

    angular.module('myApp')  
    .directive('spoint', function() {  
    return {  
    require: 'ngModel',  
    link: function(scope, elm, attrs, ctrl) {  
    var fibonacci = [1, 2, 3, 5, 8, 13, 20, 40, 80];  
    ctrl.$parsers.unshift(function(viewValue) {  
    if (fibonacci.indexOf(parseInt(viewValue)) >= 0) {  
    ctrl.$setValidity('fibonacci', true);  
    return viewValue;  
    } else {  
    ctrl.$setValidity('fibonacci', false);  
    return undefined;  
    }  
    });  
    }  
    };  
    });  

    这里值得注意的是directive里link方法的第四个参数,我们在require里定义了ngModel 所以这里它是一个NgModelController

    NgModelController是用来为ng-model提供了一组API。通过他我们可以他来确定ngModel的 值是否是合法的。 我们这里只介绍其中和表单验证有关的几个方法和属性。

    上面的例子中我们用到了$parsers这个属性和$setValidity()这个方法。 $parsers里保存了一组function, 每当DOM里数据变化的时候, 这组function会被一次调用。这里给了我们机会在用户修改了DOM里值的时候, 去对新输入的值做校验。

    3.Directive的书写格式和参数说明,controler,complie,link的区别Scope:定义映射关系

       参考文章链接地址 http://blog.51yip.com/jsjquery/1607.html

    controller,link,compile有什么不同

    //directives.js增加exampleDirective  
    phonecatDirectives.directive('exampleDirective', function() {  
        return {  
            restrict: 'E',  
            template: '<p>Hello {{number}}!</p>',  
            controller: function($scope, $element){  
                $scope.number = $scope.number + "22222 ";  
            },  
            link: function(scope, el, attr) {  
                scope.number = scope.number + "33333 ";  
            },  
            compile: function(element, attributes) {  
                return {  
                    pre: function preLink(scope, element, attributes) {  
                        scope.number = scope.number + "44444 ";  
                    },  
                    post: function postLink(scope, element, attributes) {  
                        scope.number = scope.number + "55555 ";  
                    }  
                };  
            }  
        }  
    });  
      
    //controller.js添加  
    dtControllers.controller('directive2',['$scope',  
        function($scope) {  
            $scope.number = '1111 ';  
        }  
    ]);  
      
    //html  
    <body ng-app="phonecatApp">  
        <div ng-controller="directive2">  
            <example-directive></example-directive>  
        </div>  
    </body>  

    运行结果:Hello 1111 22222 44444 55555 !  

    由结果可以看出来,controller先运行,compile后运行,link不运行。

     将上例中的compile注释掉

    //directives.js增加exampleDirective  
    phonecatDirectives.directive('exampleDirective', function() {  
        return {  
            restrict: 'E',  
            template: '<p>Hello {{number}}!</p>',  
            controller: function($scope, $element){  
                $scope.number = $scope.number + "22222 ";  
            },  
            link: function(scope, el, attr) {  
                scope.number = scope.number + "33333 ";  
            },  
            compile: function(element, attributes) {  
                return {  
                    pre: function preLink(scope, element, attributes) {  
                        scope.number = scope.number + "44444 ";  
                    },  
                    post: function postLink(scope, element, attributes) {  
                        scope.number = scope.number + "55555 ";  
                    }  
                };  
            }  
        }  
    });  
      
    //controller.js添加  
    dtControllers.controller('directive2',['$scope',  
        function($scope) {  
            $scope.number = '1111 ';  
        }  
    ]);  
      
    //html  
    <body ng-app="phonecatApp">  
        <div ng-controller="directive2">  
            <example-directive></example-directive>  
        </div>  
    </body>  

    运行结果:

    1. Hello 1111 22222 33333 !  

    由结果可以看出来,controller先运行,link后运行,link和compile不兼容。

  • 相关阅读:
    ajax怎么打开新窗口具体如何实现
    关于springcloud hystrix 执行 hystrix.stream 跳转失败的问题
    Zookeeper 和Eureka比较
    Maven Install报错:Perhaps you are running on a JRE rather than a JDK?
    Oracle11g卸载步骤
    Oracle数据库备份及恢复
    python是如何进行内存管理的?
    python面试题
    json模块与hashlib模块的使用
    随机验证码、打印进度条、文件copy脚本
  • 原文地址:https://www.cnblogs.com/Spring-Rain/p/4888457.html
Copyright © 2011-2022 走看看