AnagularJs之directive

前言：

　　昨日周六，再登梧桐山。六点半，起。未到顶，雨纷飞。冒雨行，终封顶，只为合照一张。五点半，下山行。聆听大自然的律动，双腿随其自然而颤抖！今早起，我的双腿犹如叛逆期的少年，或如领家的孩童，遂决定今天宅一天，为打发闲暇时光，写篇博文。

为什么要用directive？

　　ng的directive从字面上理解就是ng框架的一个指令。

　　假如我们发现要写很多公共或是重用的dom、class、attr属性或是需要操作scope作用域，就要考虑代码最好不要copy、不要出现重复的代码段，好像是哪位大牛说的话，具体记不清了，反正就是为了性能优化等方面。

　　说的更专业点就是：

使你的html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
抽象一个自定义组件，在其他地方进行重用。

直接上代码：

<!DOCTYPE html>
<html ng-app="nick">
<head>
  <meta charset="UTF-8">
  <title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
  var myModule = angular.module('nick',[]);
  myModule.directive('hi', function() {
    return {
      template: '<p>my name is nick</p>',
      replace: true,
      restrict: 'E',
    };
  });
</script>
</body>
</html>

这就是我们常用的最简单的写法，其实有2种写法。

写法一：return写法（常用）

 var myModule = angular.module();
  myModule.directive('directiveName', function() {
    return {
        //内容
    };
  });

写法二：定义js域

var myModule = angular.module();
  myModule.directive('directiveName', function() {
     var myObj={
        //内容
    };
    return myObj;
  });

一般我们都是用第一种写法，下面以写法一为例：

var myModule = angular.module();
  myModule.directive('directiveName', function() {
    return {
      priority: 0,
      template: '<p>nick</p>',
      templateUrl: 'nick.html',
      replace: true,
      transclude: true,
      restrict: 'E',
      scope: false,
      controller:'someController',
      controllerAs:'mainController',
      compile: function compile(meElement, meAttrs, transclude) {
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {},
          post: function postLink(scope, iElement, iAttrs, controller) { }
        }
      },
      link: function postLink(scope, iElement, iAttrs) { }
    };
  });

这是我总结出目前directive最全的参数了。下面对参数进行一一介绍：

directiveName

　　自定义directive指令的名字，应该做到见名知义，方便调用。

priority

　　(Number)，可选参数（作为了解，使用几率极小）指明指令的优先级，当有多个directive定义在同一个DOM元素时，有时需要明确它们的执行顺序。这属性用于在directive的compile function调用之前进行排序。如果优先级相同，则执行顺序是不确定的（经初步试验，优先级高的先执行，同级时按照类似栈的“后绑定先执行”。另外，测试时有点不小心，在定义directive的时候，两次定义了一个相同名称的directive，但执行结果发现，compile或者link都执行）。

restrict

　　(String)可选参数,指明指令在DOM的声明形式；

　　取值：

E(DOM元素)
A(attr属性)
C(class类)
M(注释)

　　默认值为A；可以多个一起用，如EA.表示即可以是元素也可以是属性。

template(template和templateUrl二选一)

　　(Sting或Function) 可选参数，如果replace为true，则将模版内容替换当前的HTML元素，并将原来元素的属性、class一并迁移；如果为false，则将模版元素当作当前元素的子元素处理。　　

写法一：(Sting)

<!DOCTYPE html>
<html ng-app="nick">
<head>
  <meta charset="UTF-8">
  <title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
  var myModule = angular.module('nick',[]);
  myModule.directive('hi', function() {
    return {
      restrict: 'E',
      template: '<div><h1>Hi nick</h1></div>',
      replace: true
    };
  });
</script>
</body>
</html>

写法二：(Fucntion)

<!DOCTYPE html>
<html ng-app="nick">
<head>
  <meta charset="UTF-8">
  <title>nick directive</title>
</head>
<body>
<hi1></hi1>
<hi2 title = 'directive2'></hi2>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
  var myModule = angular.module('nick',[]);
  myModule.directive('hi1', function() {
    return {
      restrict: 'E',
      template: '<div><h1>Hi nick</h1></div>',
      replace: true
    };
  });
  myModule.directive("hi2",function(){
    return{
      restrict:'E',
      template: function(tElement,tAttrs){
        var _html = '';
        _html += '<div>' +'hello '+tAttrs.title+'</div>';
        return _html;
      }
    };
  });
</script>
</body>
</html>

虽然写法一为常用写法，但是写法二也应该了解。亲们，发现了么？写法二使用到了html中hi2标签的title属性。

templateUrl(template和templateUrl二选一)

　　(Sting或Function) 可选参数，如果replace为true，则将模版内容替换当前的HTML元素，并将原来元素的属性、class一并迁移；如果为false，则将模版元素当作当前元素的子元素处理。但模版通过指定的url进行加载。因为模版加载是异步的，所以compilation、linking都会暂停，等待加载完毕后再执行。

注意：

　　在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板你可以再你的index页面加载好后，将下列代码作为你页面的一部分包含在里面。

<!DOCTYPE html>
<html ng-app="nick">
<head>
  <meta charset="UTF-8">
  <title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('nick', []);
  app.directive('hi', function() {
    return {
      restrict: 'E',
      templateUrl: 'hi.html',
      replace: true
    };
  });
</script>
<script type='text/ng-template' id='hi.html'>
  <div><h1>Hi nick</h1></div>
</script>
</body>
</html>

replace

　　(Boolean)，默认值为false，设置为true时候，hi这个标签不在了，反之，则存在。这里比较简单，就不上代码了。

scope

false(默认值):表示继承父作用域。
true:表示继承父作用域，并创建自己的作用域（子作用域）;如果在同一个元素中有多个directive需要新的scope的话，它还是只会创建一个scope。新的作用域规则不适用于根模版（root of the template），因此根模版往往会获得一个新的scope。
{}:表示创建一个全新的隔离作用域；这对于创建可复用的组件是很有帮助的，可以有效防止读取或者修改父级scope的数据。这个独立的scope会创建一个拥有一组来源于父scope的本地scope属性的object hash。

结语：

　　scope是一个重点，也是坑出现最多的地方，我将在后面的博文中总结写我的理解！

现在补上scope作用域的总结！

　　还有controller、controllerAs、compile、link，可以看看这篇博客！

以上便是我对ng directive的理解，如有不当或许补充的地方，望各位多多评论、不吝赐教！

posted @ 2016-10-30 13:20 webNick 阅读(1082) 评论(0) 编辑收藏举报

webNick