美文网首页ionic
《AngularJs权威指南》学习笔记---指令

《AngularJs权威指南》学习笔记---指令

作者: 火之玉 | 来源:发表于2017-07-03 14:21 被阅读31次
    《AngularJs权威指南》

    记得最开始学习ionic混合开发的时候, 朋友们都推荐我先学学angular.js, 然后再看ionic框架的东西; 现在想来也确实, ionic框架基本都是UI相关的知识, 并不难, 而页面里面涉及到angular.js的各种逻辑才是真正能让一个人成为大牛的知识;

    选这本书就是因为朋友们都推荐这本, 而且讲的还不错, 最重要的是他们有资源, O(∩_∩)O哈哈~

    首先介绍一下本书中关于指令的知识结构:

    AngularJs权威指南之指令思维导图

    一. 指令简介

    用过HTML的都知道, 往往在实现一些特殊功能的时候, 原有的HTML标签并不完全能满足设计要求, 这时候指令就派上用场了; 指令本质上就是扩展一些自定义的HTML元素以实现一些特定的功能;

    二. 内置指令

    AngularJS事实上也是在原生JS的基础上进行一些扩展和优化, 自然就会包括一些自定义的内置指令; 除了form和a等一些重载了原生的HTML元素, 其他的内置指令通常以ng作为前缀; 这样做的目的也是对原生的一种优化, 比如常用的href指令, 无论里面的链接是可用还是, 不可用的, 当调用href的时候, 就会直接返回调用结果; 而ng-href指令则是当里面的表达式调用并且返回一个值的时候才开启, 否则会是一个禁用状态; 当然既然人家官方用ng这个前缀, 你就不要跟人家抢了, 换一个, 大家和谐一点儿;

    有网友总结了一下AngularJS的内置指令, 一共有63个;

    简单介绍一下form指令:

    <form>
    First name:</br>
    <input type="text" name="firstname" value="huo">
    <br>
    Last name:</br>
    <input type="text" name="lastname" value="yu">
    <br><br>
    <input type="submit" value="Submit">
    </form>
    

    效果图:

    要注意一下几点:

    • HTML原生的form表单是不能嵌套的, 但Angular封装后可以嵌套
    • Angular为form扩展了自动校验, 防止重复提交等功能
    • Angular对input元素的type进行了了扩展, 一共提供一下10中类型:
      text, number, url, email, radio, checkbox, hidden, button, submit, reset;
    • Angular为表单内置了4种CSS样式
      ng-valid, ng-invalid, ng-pristine, ng-dirty;
    • 内置校验器: require, minlength, maxlength

    三. 指令详解

    1. 指令定义

    本书中对指令的定义是在特定DOM元素上运行的函数, 指令可以扩展这个元素的功能;
    在Angular中是通过directive()这个模块来定义指令的;而directive()可以接受两个参数:

    • name
      指令的名字
    • factory_function(函数)
      这个函数定义了指令的行为
     angular.application('myApp', [])
         .directive('myDirective', function() {
         //  一个指令定义对象
         return {
                 //  通过设置项来定义指令, 在这里进行填写
                };
    });
    

    在HTML中调用就行:

    <div my-directive></div>
    
    2. 指令函数介绍

    2.1 restrict(字符串)

    这些选项可以单独使用, 也可以混合使用;

    2.2 优先级(数值型)
    由于考虑到性能问题, ngRepeat被设置成所有内置指令中优先级最高的; 当然如果两个元素的优先级一样, 会执行先声明的那个;

    2.3 terminal(布尔型)
    它用来告诉AngularJs停止运行当前元素上比本指令优先级低的指令, 但当优先级相同的情况还是会运行;
    例如:ngView和ngIf, ngIf的优先级略高于ngView, 如果ngIf表达式为true, ngView就可以被正常执行; 但如果ngIf的表达式为false, ngView就不会被执行;

    2.4 template(字符串或函数)
    template参数必须被设置成以下两种形式之一:

    • 一段HTML文本
    • 一个可以接受两个参数的的函数, 参数为tElement和tAttrs, 并返回一个代表模板的字符串;

    2.5 templateUrl(字符串或函数)
    templateUrl参数可以是以下形式:

    • 一个代表外部HTML文件的路径字符串
    • 一个可以接受两个参数的的函数, 参数为tElement和tAttrs, 并返回一个代表模板的字符串;

    2.6 replace(布尔型)
    replace是个可选参数, 默认为false; 当设置为true后

    .directive('someDirective', function() {
             return {
                 replace: true
                 template: '<div>looking for something<div>'
                    };
     });
    

    输出结果为:

    <div>looking for something<div>
    

    2.7 scope参数(布尔型或对象)
    scope参数有三种取值方式;
    2.7.1 false(默认值)
    直接使用父scope, 内部并没有一个新的scope,它和指令以外的代码共享同一个scope。
    ①指令

    app.directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: '../templates/my_template.html',
            scope: false,   // 默认值
            controller: null
        }
    });
    

    ②指令模板(my_template.html)

    <div>
        <!--这里ng-model绑定的input,就是父scope的变量input-->
        <p>自定义指令scope:<input type="text" ng-model="input"></p>
        <p>结果:{{input}}</p>
    </div>
    

    ③指令的使用(index.html)

    <body ng-app="scopeTest" ng-controller="scopeTestStr">
        <p>父scope:<input type="text" ng-model="input"></p>
        <!--自定义指令-->
        <my-directive></my-directive>
    </body>
    

    效果如下:

    2.7.2 true(继承父scope)
    当设置为true的时候, 会从父作用域继承并创建一个新的作用域对象;
    参照值为false的情况, 只是将值改为true; 效果如下:

    2.7.3 { }
    创建一个新的"隔离"scope,但仍可与父scope通信;
    隔离的scope,通常用于创建可复用的指令,也就是它不用管父scope中的model。然而虽然说是“隔离”,但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种:

    ①@ 单项绑定

    <body ng-app="scopeTest">
        <!--外部scope-->
        <p>父scope:<input type="text" ng-model="input"></p>
        <!--内部隔离scope-->
        <my-directive my-text="{{input}}"></my-directive>
    
        <script>
            var app = angular.module('scopeTest', []);
            app.directive('myDirective', function () {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '<p>自定义指令scope:<input type="text" ng-model="myText"></p>',
                    scope: {
                        myText: '@'
                    }
                }
            });
        </script>
    </body>
    

    效果图:

    ②= 双向绑定

    <body ng-app="scopeTest">
        <!--外部scope-->
        <p>父scope:<input type="text" ng-model="input"></p>
    
        <!--内部隔离scope-->
        <!--注意这里,因为是双向绑定,所以这里不要“{{}}”这个符号-->
        <my-directive my-text="input"></my-directive>
    
        <script>
            var app = angular.module('scopeTest', []);
            app.directive('myDirective', function () {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '<p>自定义指令scope:<input type="text" ng-model="myText"></p>',
                    scope: {
                        myText: '=' // 这里改成了双向绑定
                    }
                }
            });
        </script>
    </body>
    

    效果图:

    ③& 内部scope的函数返回值和外部scope绑定

    <body ng-app="scopeTest">
        <!--外部scope-->
        <p>父scope:<input type="text" ng-model="input"></p>
    
        <!--内部隔离scope-->
        <!--注意这里,函数名字也要用 连字符命名法-->
        <my-directive get-my-text="input"></my-directive>
    
        <script>
            var app = angular.module('scopeTest', []);
            app.directive('myDirective', function () {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '<p>结果:{{ getMyText() }}</p>',
                    scope: {
                        getMyText: '&' // 这里改成了函数返回值的绑定
                    }
                }
            });
        </script>
    </body>
    

    效果图:

    2.8 transclude(布尔型)
    默认为false; 只有当你希望创建一个可以包含任意内容的指令的时候才会为true; 代码如下所示:

    app.directive('myDirective', function() {
        return {
            restrict: 'AE',
            transclude: true,
            template: "<div> hellow angular ! <div ng-transclude></div></div>"
        }
    });
    

    2.9 controller(字符串或函数)
    指令内部的controller, 暴露一些public方法给内部指令使用;
    ①字符串;

         angular.module('myApp', [])
           .directive('myDirective',  function() {
              restrict: 'A', // 始终需要
              controller: 'SomeController'
         })
    
         // 在应用中其他地方定义该控制器
         angular.module('myApp')
            .controller('SomeController', function($scope, $element, $attrs, $transclude) {
                 // 控制器逻辑
         });
    

    ②函数
    可以是指令内部通过匿名构造函数的方式来定义一个内联的控制器;

     angular.module('myApp',[])
         .directive('myDirective', function() {
             restrict: 'A',
             controller:
             function($scope, $element, $attrs, $transclude) {
                   // 控制器逻辑
            }
    });
    

    现在你也可以知道, 控制器中还有其他一些特殊的服务可以注入到指令中, 这些服务有:

    • $scope 指令对应的作用域
    • $element 指令对应的元素
    • $attrs 当前元素属性组成的对象
    • $transclude 嵌入链式函数会与对应的嵌入作用域进行预绑定

    在控制器内部操作DOM和angular.js风格相悖的做法, 但通过链式函数就可以实现这个需求; 例如在compile参数中使用transcludeFn是推荐的做法;

    本文提供了一个添加超链接的例子:

     angular.module('myApp')
         .directive('link', function() {
          return {
              restrict: 'EA',
              transclude: true,
              controller:
                   function($scope, $element, $transclude, $log) {
                   $transclude(function(clone) {
                        var a = angular.element('<a>');
                        a.attr('href', clone.text());
                        a.text(clone.text()); 8 $log.info("Created new a tag in link directive");
                        $element.append(a);
                   });
              }
          };
    });
    

    link函数可以与控制器指令的控制器互换; 控制器用来提供指令间的复用行为, 但链接函数只能在当前内部指令中定义行为且无法在指令间复用;

    link函数可以将指令互相隔离, 而controller则定义可复用的行为;

    下面附一张link函数与compile函数的比较图:

    2.10 require(字符串或数组)
    字符串或数组的值会是当前指令作用域中使用的指令名称, 即用来调用暴露的内部方法;

    对于指令的学习, 书中提供了内部原理, 当然光这些还是远远不够, 附上一个第三方指令库, 看看源码, 体验一下别人是怎么写的;
    AngularUI

    相关文章

      网友评论

        本文标题:《AngularJs权威指南》学习笔记---指令

        本文链接:https://www.haomeiwen.com/subject/ekoacxtx.html