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: 将模型中的值渲染到控件中
  • 相关阅读:
    sqlserver添加表、字段注释
    SQL语句增加字段、修改字段、修改类型、修改默认值
    端口概念
    删除数据库数据
    转移数据库表数据
    优化网站
    提高SQL查询效率
    相关方法扩展
    SQL空和NULL的区别
    C#分布式缓存Couchbase使用
  • 原文地址：https://www.cnblogs.com/zhaoyong1/p/6771301.html
Copyright © 2011-2022 走看看