zoukankan      html  css  js  c++  java
  • AngularJS指令参数

    在学习angular时,不知道你是否也像我一样对指令,路由似懂非懂的?我整理了下angular中常见的指令,下面的网址也是写angular指令的,我做了下简单的整合, 自己的也是借鉴别的博主的还有别的网站,以下还有不常用的可以了解下。

     
     
     
    1、restrict:String
    restrict是申明标识符在模板中作为元素,属性,类,注释或组合,如何使用。有四个值:E、A、C、M(A:元素    B:属性  C :样式类 M :注释)一般使用属性A的形式 属性(A)的形式可以支持老版本浏览器
     
    2、priority: Number
    priority是指令执行优先级。若在单个DOM上有多个指令,则优先级高的先执行;
    设置指令的优先级算是不常用的 指令优先级数字比较小的先触发
     
    3、template: String or Function
    (1)、字符串
    template是指令链接DOM模板
    2)、函数
    Function一个函数,可接受两个参数tElement和tAttrs。其中tElement是指使用此指令的元素,而tAttrs则实例的属性,它是一个由元素上所有的属性组成的集合(对象)
    函数里面还有两个参数 参数1(tElement):指令本身 或 指令所在的元素 参数2(tAttrs):参数1的所有属性
     
    4、emplateUrl: String
    templateUrl是指定一个字符串式的内嵌模板,如果你指定了模板是一个URL,那么是不会使用的。
    由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板。
     
    <!doctype html>
    <html ng-app="MyModule">
    <head>
    <meta charset="utf-8">
    </head<body>
    <hello></hello>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script type="text/javascript">
      var myModule = angular.module("MyModule", []);
          //注射器加载完所有模块时,此方法执行一次;缓存
          myModule.run(function($templateCache){
         $templateCache.put("hello.html","<div>Hello world!!!</div>");
          });
          myModule.directive("hello", function($templateCache) {
             return {
               restrict: 'AECM',
               template: $templateCache.get("hello.html"),
               replace: true
             }
          });
    </script>
    </html
       
       
     
     
    5、replace: Boolean
    replace是指令链接模板是否替换原有元素
     
    6、transclude: Boolean
    transclude是移动一个标识符的原始字节带到一个新模块的位置。当你开启transclude后,你就可以使用ng-transclude来指明了应该在什么地方放置transcluded内容。
    .directive("myNew" , function () {
       return{
           transclude:true,      restrict:"A",      template:"<div>我是等级<div ng-transclude></div>低等级</div>"   }
    })
     
     
     
    7、link:Function
    link通过代码修改目标DOM元素的实例,添加事件监听,建立数据绑定。compile函数用来对模板自身进行转换,而link函数负责在模型和视图之间进行动态关联;compile函数仅仅在编译阶段运行一次,而对于指令的每个实例,link函数都会执行一次;compile可以返回preLink和postLink函数,而link函数只会返回postLink函数,如果需要修改DOM结构,应该在postLink中来做这件事情,而如果在preLink中做这件事情会导致错误;大多数时候我们只要编写link函数即可。
    link函数有四个参数分别为:
    (1)scope,与指令元素相关联的作用域
    (2)element,当前指令对应的 元素
    (3)attrs,由当前元素的属性组成的对象
    (4)supermanCtrl,若指令中定义有require选项,则会有supermanCtrl参数,代表控制器或者所依赖的指令的控制器。
     
    下面实例通过link函数实现指令的复用,两个控制器与一个指令之间进行交互。指令可以调用控制器MyCtrl和MyCtrl2中的方法,但是需要注意我们必须使用属性,因为两个控制器的方法不同。
    <!doctype html>
    <html ng-app="MyModule">
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <div ng-controller="MyCtrl">
    <loader howToLoad="loadData()">滑动加载</loader>
    </div>
    <div ng-controller="MyCtrl2">
    <loader howToLoad="loadData2()">滑动加载</loader>
    </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script type="text/javascript">
    var myModule = angular.module("MyModule", []);
    myModule.controller('MyCtrl', ['$scope', function($scope){
      $scope.loadData=function(){
    console.log("加载数据中111...");
      }
    }]);
    myModule.controller('MyCtrl2', ['$scope', function($scope){
      $scope.loadData2=function(){
        console.log("加载数据中222...");
      }
    }]);
    myModule.directive("loader", function() {
    return {
    restrict:"AE",
    link:function(scope,element,attrs){
    element.bind('mouseenter', function(event) {
            //注意这里的坑,howToLoad会被转换成小写的howtoload
            scope.$apply(attrs.howtoload);
            });
            }
        }
    });
    </script>
    </html>
     
     
    8、controller和require
    (1)、controller
    controller创建一个控制器通过标识符公开通信API。给指令暴露出一组public方法,给外部调用的。
    1)、字符串
      若是为字符串,则将字符串当做是控制器的名字,来查找注册在应用中的控制器的构造函数
    2)、匿名函数
    也可以直接在指令内部的定义为匿名函数,同样我们可以再这里注入任何服务($log,$timeout等等)
    另外还有一些特殊的服务(参数)可以注入
    (a)$scope,与指令元素相关联的作用域
    (b)$element,当前指令对应的元素
    (c)$attrs,由当前元素的属性组成的对象
    (d)$transclude,嵌入链接函数,实际被执行用来克隆元素和操作DOM的函数
    注意: 除非是用来定义一些可复用的行为,一般不推荐在这使用。
      指令的控制器和link函数可以进行互换。区别在于,控制器主要是用来提供可在指令间复用的行为但link链接函数只能在当前内部指令中定义行为,且无法再指令间复用。
     
    下面是实例js中包含controller的一部分:定义了三个公共方法,供外部指令访问。
    var myModule = angular.module("MyModule", []);
    myModule.directive("superman", function() {
        return {
            scope: {},
            restrict: 'AE',
            controller: function($scope) {
                $scope.abilities = [];
                this.addStrength = function() {
                    $scope.abilities.push("strength");
                };
                this.addSpeed = function() {
                    $scope.abilities.push("speed");
                };
                this.addLight = function() {
                    $scope.abilities.push("light");
                };
            },
            link: function(scope, element, attrs) {
                element.addClass('btn btn-primary');
                element.bind("mouseenter", function() {
                    console.log(scope.abilities);
                });
            }
        }
    });
     
    (2)、require
    require当前标识符需要另一个标识符提供正确的函数功能。require的值可以是字符串或者数组。字符串代表另一个指令的名字,它将会作为link函数的第四个参数。controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编写,使用起来比较简单;另一种方法则是require AngularJS内建的指令,其中大部分时间需要require的都是ngModel这个指令。
     
    下面是实例程序:假设现在我们要编写三个指令,三个指令中的link链接函数中存在有很多重合的方法,这时候我们就可以将这些重复的方法写在一个指令的controller中。然后在这三个指令中,require这个拥有controller字段的的指令,最后通过link链接函数的第四个参数就可以引用这些重合的方法了。
    <!doctype html>
    <html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
        <script src="js/angular.min.js"></script>
    </head>
    <body>
    <div class="row">
    <div class="col-md-3">
    <superman strength>动感超人---力量</superman>
    </div>
    </div><br>
    <div class="row">
    <div class="col-md-3">
    <superman strength speed>动感超人2---力量+敏捷</superman>
    </div>
    </div><br>
    <div class="row">
    <div class="col-md-3">
    <superman strength speed light>动感超人3---力量+敏捷+发光</superman>
    </div>
    </div>
    </body>
    <script type="text/javascript">
    var myModule = angular.module("MyModule", []);
    myModule.directive("superman", function() {
        return {
            scope: {},
            restrict: 'AE',
            controller: function($scope) {
                $scope.abilities = [];
                this.addStrength = function() {
                    $scope.abilities.push("strength");
                };
                this.addSpeed = function() {
                    $scope.abilities.push("speed");
                };
                this.addLight = function() {
                    $scope.abilities.push("light");
                };
            },
            link: function(scope, element, attrs) {
                element.addClass('btn btn-primary');
                element.bind("mouseenter", function() {
                    console.log(scope.abilities);
                });
            }
        }
    });
    myModule.directive("strength", function() {
        return {
            require: '^superman',
            link: function(scope, element, attrs, supermanCtrl) {
                supermanCtrl.addStrength();
            }
        }
    });
    myModule.directive("speed", function() {
        return {
            require: '^superman',
            link: function(scope, element, attrs, supermanCtrl) {
                supermanCtrl.addSpeed();
            }
        }
    });
    myModule.directive("light", function() {
        return {
            require: '^superman',
            link: function(scope, element, attrs, supermanCtrl) {
                supermanCtrl.addLight();
            }
        }
    });
    </script>
    </html>
    另外我们可以在require的参数值加上下面的某个前缀,这会改变查找控制器的行为:
    (1)没有前缀,指令会在自身提供的控制器中进行查找,如果找不到任何控制器,则会抛出一个error
    (2)?如果在当前的指令没有找到所需的控制器,则会将null传给link连接函数的第四个参数
    (3)^如果在当前的指令没有找到所需的控制器,则会查找父元素的控制器
    (4)?^组合
     
    9、scope
    scope为这个标识符创建一个新的作用域,而不是继承符作用域。
    (1)、scope的值分别为:false,true,{}
    false 默认值 没有新生成作用域
     true:生成一个作用域 并且该作用域可以继承 父作用域里的内容
    {}:封闭作用域 , 和外界没有任何关系
    (2)、scope的绑定策略
    如果想让封闭区域和外界有联系 或者访问外界的数据变量
    或触发外界的某一个事件
    要对指令内部的数据使用@ = & 来进行修饰
    =:和外界数据关联 外界改变会导致自己改变 自己改变外界也变
    @:类似于继承外界数据 外界数据改变自己改变 自己改变外界不变
    &:关联外界的某个事件
    方法1:使用@(@attr)来进行单向文本(字符串)绑定
    方法二:使用=(=attr)进行双向绑定
    方法三:使用&来调用父作用域中的函数
    可以利用前面的link函数取属性的方式来进行绑定,这里更方便的绑定方式就是利用&。
     
     
    告诉大家我的一个理解方法。
    把它们分成三类:
    1. 描述指令或DOM本身特性的内部参数
    2. 连接指令外界、与其他指令或控制器沟通的对外参数
    3. 描述指令本身行为的行为参数
      • 内部参数

        restrict:String
        priority: Number,指令执行优先级
      • template: String,指令链接DOM模板,例如“<h1>{{head}}</h1>”
      • templateUrl:String,DOM模板路径
      • replace: Boolean,指令链接模板是否替换原有元素,

     
     
    angular中指令的生命周期// 在angular功能启动前
    angular 是以html文本的格式存储在编译器中 应用启动后,会编译和链接 紧接着 作用域会协同html进行绑定 应用会对用户对html的操作做出反应
     
     
    可做了解:
      1.  $viewValue: 视图上的值, 保存着更新视图上的字符串值
      2.  $modelValue: 模型上的值, 这两个字很多情况下都是一致的, 但是$viewValue上的值有可能和$modelValue上的值不同, 因为视图上的值传递给模型需要一个过程
      3. $parsers: 由很多函数组成的数组, 这里面的函数会以流水的形式被逐一调用, ngModel取到的DOM上的值会被传入到函数中作为参数
      4. $formatters: 由很多函数组成的数组, 以流水的形式被逐一调用, 这是用来处理数据格式的(格式化数据), 显示到DOM上
     5. $viewChangeListeners: 一个由函数组成的数组, 当视图上的值发生改变的时候, 数组中的函数也会以流水的形式被调用
      6. $error: 存放错误信息
      7. $pristine: 布尔值, 控件的值是不是初始状态, 如果是就为true, 否则为false//  8. $dirty: 值正好和$pristine相反, 如果用户操作了控件, 值为true
      9. $valid: 控件中的值是否有错误, 如果有错误就为false, 没有错误就为true
      10.$invalid: 值和$valid相反
      11. $render: 将模型中的值渲染到控件中
  • 相关阅读:
    React在componentDidMount里面发送请求
    React 术语词汇表
    React里受控与非受控组件
    React和Vue等框架什么时候操作DOM
    【LeetCode】79. Word Search
    【LeetCode】91. Decode Ways
    【LeetCode】80. Remove Duplicates from Sorted Array II (2 solutions)
    【LeetCode】1. Two Sum
    【LeetCode】141. Linked List Cycle (2 solutions)
    【LeetCode】120. Triangle (3 solutions)
  • 原文地址:https://www.cnblogs.com/zhaoyong1/p/6771301.html
Copyright © 2011-2022 走看看