directive的简单使用总结,中的自定义指令之详解API

html 结构:

对表格里的知识进行延伸

Hello 1111 22222 33333!
Name: {{customerInfo.name}} Address: {{customerInfo.address}}

自定义指令当然也需要实现这种功能啦。scope属性为对象时,可为自定义指令指定一个可以绑定值的属性。这里还得说明一下的是,这个scope属性与自定义指令里link属性里的scope参数是一个变量。

更多了解可以参考Angular官方站点:

html 结构:

其余两种符号用法:

三、实例2:关于transclude

说明:
在link函数中,操作dom节点,让dom的文本节点动态显示时间跳动。在页面跳转之后及时清除定时器和监视器以免发生内存泄漏。

一个我做过的分页例子

图片 1


指令中的如果定义scope属性则html中的scope不会直接继承controller中的scope,在html中使用的都需要在scope:{}中声明,否则就是undefined

4.scope属性的值是对象(object)时的用法

templateUrl –
与template基本一致,但模版通过指定的url进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。

说明: 此处,myCtrl 中定义的 $scope.customer
属性和属性值都在指令中的模板使用了。同样的,在指令return 对象中的
template
也可被替换成一路径,在路径html中书写和template中同样的代码,使用这种方式,可以操作更多代码。

通过在自定义指令里添加 restrict
属性,根据设置不同的值来决定html页面的调用方式,如:

<!DOCTYPE html>
<html ng-app='helloApp' ng-controller="myController">
 <body>
  <hello>{{myName}}</hello>
 </body>

 <script src="js/angular.min.js"></script>
 <script src="js/helloDirective.js"></script>
</html>
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '<div>Hello,my name is </div>',
  replace: true,
  transclude:true
 };
});

输出结果:

<script type="text/ng-template" id="template.html">
   <div>自定义指令模板用Script标签定义的方式,须放在html页面ng-controller指令所在标签的内部</div>
</script>

transclude:指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。上述例子replace设置为true,模版将会替换当前元素。而transclude设置为true的作用可以简化地理解成:把<hello>标签替换成我们所编写的HTML模板,但是<hello>标签内部的内容保持不变。而<span
ng-transclude></span>则是指明标签内部内容插入到模板内容的哪个位置。

html结构:

自定义指令属性详解

  1. 使html更具有语义化,不需要深入研究和了解逻辑即可知道页面的大致逻辑;
  2. 抽象出一个自定义的组件,以便在其他地方可以进行复用。
 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.name = 'Tobias';
  }])
  .directive('myDialog', function() {
   return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
 };
});

controller可以使用的参数,作用域、节点、节点的属性、节点内容的迁移,这些都可以通过依赖注入被传进来,所以你可以根据需要只写要用的参数,有$scope,Z$element,
$attrs, $transclude。

下面我想通过一些实例结合分析对我所了解的directive进行一些简单的归纳总结(我所使用的是angular1.5.3):

Name: Naomi
Address: 1600 Amphitheatre

有了前面的一个示例,下面再来说说绑定策略:即用符号前缀给自定义指令传值。它是一个键值对,键是在自定义指令中使用的,值里符号后面的字符串是html页面自定义指令的属性名;如果值里只有符号,则html页面自定义指令的属性名就是键名。

js代码:

javascript结构:

<div ng-app="myApp" ng-controller="myController">
 要动态变化的内容: <input ng-model="obj">
</div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myController', function($scope) {
  $scope.obj = "这个字符串值会同步到html里";
 });
</script>

解析:

说明: vojta
在指令中的scope没有被定义,不会直接继承在controller中的,那么他就是undefined,所以就是空白(什么都不显示)

controller:
在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令,允许指令之间进行交互,如前面的例子。

html代码:

 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
  $scope.customer = {
   name: 'Naomi',
   address: '1600 Amphitheatre'
  };
   }])
 .directive('myCustomer', function() {
  return {
   templateUrl: function(elem, attr) {
    return 'customer-' + attr.type + '.html';
   }
  };
 });

1.templateUrl

将上例中的compile注释掉的运行结果:

编译后的html结果:

<body ng-app="myApp">

<my-directive></my-directive>

<script>
 var app = angular.module("myApp", []);
 app.directive("myDirective", function() {
  return {
   template : "<h1>模板:可以写自己的html页面代码</h1>"
  };
 });
</script>

</body>

图片 2

javascript结构:

自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写。如:
myDirective。

一、Directive的使用

javascript结构:

levelOne: compile => 
  <level-two>
   <level-three>
    Hello 
   </level-three>
  </level-two>
 levelTwo: compile => 
   <level-three>
    Hello 
   </level-three>
 levelThree: compile => 
    Hello 
 levelOne: pre link => 
  <level-two>
   <level-three>
    Hello 
   </level-three>
  </level-two>

levelTwo: pre link => 
   <level-three>
    Hello 
   </level-three>

levelThree: pre link => 
    Hello 

levelThree: post link => 
    Hello 
levelTwo: post link => 
   <level-three>
    Hello 
   </level-three>

levelOne: post link => 
  <level-two>
   <level-three>
    Hello 
   </level-three>
  </level-two>

实例代码:

Name: Naomi Address: 1600 Amphitheatre

link后的方法在指令中负责执行DOM
操作和注册事件监听器等。link函数有五个参数(scope,element,attrs,controller,linker)。link
方法的参数解释:

指令的控制器和link函数(后面会讲)可以进行互换。区别在于,控制器主要是用来提供可在指令间复用的行为但link链接函数只能在当前内部指令中定义行为,且无法再指令间复用。

Check out the contents, Tobias!

定义是否将当前元素(html页面的自定义指令)的内容转移到模板中。
模板中要接收当前元素内容的标签需要使用ng-transclude指令。

简单解析:

angular.module('myApp', [])
  .controller('myCtrl1', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
   };
  }])
  .controller('myCtrl2', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Igor',
    address: '123 Somewhere'
   };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
   };
  });

由上面结果可知,post的执行顺序却是先levelthree最后levelone,即反向调用相关联的post-link函数。这么做的好处是,当我们运行levelone时,保证leveltwo与levelthree都已经执行过了,这样就会更安全。所以默认的link就是post。

运行结果:

templateUrl 函数式编程

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。

实例解析:

通过transclude和ng-transclude创建可包裹其他元素的指令

element: 包含指令的DOM元素的引用, link 方法一般通过jQuery
操作实例(如果没有加载jquery,还可以使用Angular’s jqLite )。

摘要

说明:
指令中的scope本应隔离controller中的作用域的,但是由于设置了transclude=true选项,scope就会继承controller中的定义,所以最终是Tobias而不是Jeff。

compile函数有三个参数(cElement,cAttrs,cLinker),使用compile函数可以在ng创建原始dom实例以及创建scope实例之前,改变原始的dom(template
element);可以应用于当需要生成多个element实例但只有一个template
element的情况,ng-repeat就是一个最好的例子。它就在是compile函数阶段改变原始的dom生成多个原始dom节点,然后每个又生成element实例。因为compile只会运行一次,所以当你需要生成多个element实例的时候是可以提高性能的。

图片 3

 Name: {{customer.name}} Address: {{customer.address}}

分析打印结果:

修改上面实例代码:

html编译后的结果:

html页面代码:

3、replace:如果设置为true,那么模版将会替换当前元素,而不是作为子元素添加到当前元素中。(注:为true时,模版必须有一个根节点)

html结构:

通过 .directive() 函数来添加自定义的指令。

template:指令显示的模板内容,一般由html标签和文本组成。通常情况下html内容较简单的情况下使用,模板内容复杂的建议将公共部分抽离到html文件中,使用templateUrl属性。

隔离指令的作用域

引用自定义指令的html页面的控制器所能控制的范围。下面代码的父作用域就是myController所控制的范围

效果截图:

templateUrl html 结构:

运行levelone指令中的compile函数,ng就会递归遍历它的dom节点,然后在level-two与level-three上面重复这些操作。所以会依次打印连续三个compile。

二、一个简单的实例

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
   $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    scope: {
     customerInfo: '=info'
    },
    templateUrl: 'my-customer-plus-vojta.html'
   };
  });

6.link属性用法

angular.module("app",[]).directive("directiveName",function(){
return{
//通过设置项来定义
};
})
 <my-dir></my-dir>

 <!-- directive: my-dir exp -->

link又分为pre-link和post-link,在代码里直接用pre和post表示,当我们直接使用link时,默认跟post一样。我在网上找了个例子来说明一下区别,代码如下:

directive(指令)是angular的一个非常强大又有用的功能,它相当于实现了组件化的概念。我们可以通过它公共地自定义DOM元素或CLASS类或ATTR属性,并且在这基础上进行操作scope、绑定事件等等。将一些公共的模块或操作封装到指令中,然后就可以在html页面中编写简单的一行代码就可以加载整个公共模块,大大避免了代码的冗余。一般使用directive有以下场景:

不同的templateUrl ①

<body>
 <div ng-app="myApp" ng-controller="myController">
  <level-one>
   <level-two>
    <level-three> Hello </level-three>
   </level-two>
  </level-one>
 </div>
 <script>
   //创建模块
  var app = angular.module('myApp', []);
  //创建控制器
  app.controller('myController', function($scope) { 

  });
  //自定义指令
  function createDirective(name){
   return function(){
   return {
    restrict: 'E',
    compile: function(tElem, tAttrs){
    console.log(name + ': compile => ' + tElem.html());
    return {
     pre: function(scope, iElem, iAttrs){
     console.log(name + ': pre link => ' + iElem.html());
     },
     post: function(scope, iElem, iAttrs){
     console.log(name + ': post link => ' + iElem.html());
     }
    }
    }
   }
   }
  }

  app.directive('levelOne', createDirective('levelOne'));
  app.directive('levelTwo', createDirective('levelTwo'));
  app.directive('levelThree', createDirective('levelThree'));
 </script>
</body>
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '<div>Hello,friends!</div>',
  replace: true
 };
});

① 通过不同的controller

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

<!DOCTYPE html>
<html ng-app='helloApp'>
 <body>
  <hello></hello>
 </body>

 <script src="js/angular.min.js"></script>
 <script src="js/helloDirective.js"></script>
</html>

 Name: Naomi Address: 1600 Amphitheatre
 Name: Igor Address: 123 Somewhere

link函数有五个参数(scope,element,attrs,ctrl,linker)。

Hello 1111 22222 44444 55555!
 <div ng-app="myApp" ng-controller="myCtrl">
   <my-dialog>Check out the contents, {{name}}!</my-dialog>
 </div>

3.什么是scope的父作用域

四、实例3:关于compile,link和controller

<div ng-controller="myCtrl">
 <div my-customer></div>
</div>
属性 值类型 说明
restrict string 指令的调用方式,A、C、E、M
priority number 指令执行的优先级
template string 指令使用的模板,可将html页面代码写于此。只能与templateUrl二选其一
templateUrl string 从指定的url地址加载模板。只能与template二选其一
replace boolean 是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有<my-directive>标签;false :则append(追加)在当前元素上,即模板的内容包在<my-directive>标签内部。默认false。
transclude boolean 是否将当前元素的内容转移到模板中
scope boolean /object 指定指令的作用域。false(默认值): 使用父作用域作为自己的作用域(每个引用自定义指令的标签若其中一个标签改变某一变量值,则会影响其他标签的值 )。true: 新建一个作用域,该作用域继承父作用域(两个引用自定义指令的标签之间的变量互不影响)。JavaScript对象:与父作用域隔离,并指定可以从父作用域访问的变量
controller function 定义与其他指令进行交互的接口函数
require string 指定需要依赖的其他指令
link function 以编程的方式操作DOM,包括添加监听器等
compile function 编程的方式修改DOM模板的副本,可以返回链接函数

效果截图:

② 通过指令属性映射scope

自定义指令代码:也算是angularJS的分页插件

图片 4

输出:

如果template里拼写的html页面代码十分的多页复杂,拼字符串的话就太麻烦啦,这里我们就可以选择templateUrl。我们可以将要拼写的html页面代码独立到一个页面里,如template.html;然后再指定该html文件所在的路径即可,如templateUrl:”template.html”。用到该自定义指令时,会自动发一个http请求来获取template.html对应的模板内容。这样做的缺点是,多了一个http请求。别急,可以改进的:

您可能感兴趣的文章:

  • 学习AngularJs:Directive指令用法(完整版)
  • AngularJS中directive指令使用之事件绑定与指令交互用法示例
  • AngularJS中的Directive自定义一个表格
  • Angular之指令Directive用法详解
  • AngularJs
    directive详解及示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

2.transclude

  1. E – 元素名称: <my-directive></my-directive>
  2. A – 属性名:<div my-directive=”exp”></div>
  3. C – class名: <div class=”my-directive:exp;”></div>
  4. M – 注释 : <!– directive: my-directive exp –>

html结构:

<first-directive>
  <expander ng-repeat="item in list" attribute="list">{{item.title}}:{{item.text}}</expander>
 </first-directive>

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

<div ng-controller="myCtrl">
  <div my-customer></div>
</div>

您可能感兴趣的文章:

  • 深入讲解AngularJS中的自定义指令的使用
  • AngularJS创建自定义指令的方法详解
  • AngularJS优雅的自定义指令
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS
    自定义指令详解及实例代码
  • AngularJS自定义指令实现面包屑功能完整实例
  • AngularJS实现自定义指令与控制器数据交互的方法示例
  • AngularJS
    自定义指令详解及示例代码
  • AngularJS自定义指令之复制指令实现方法
  • 详解angularJS自定义指令间的相互交互
  • AngularJS实现自定义指令及指令配置项的方法
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>
<div ng-app="myApp">
  <div ng-controller="myCtrl1">
    <my-customer></my-customer>
  </div>
  <div ng-controller="myCtrl2">
    <my-customer></my-customer>
  </div>
</div>
<body >
 <div ng-app="myApp" ng-controller="myController">
  <!-- 引用自定义指令 -->
  <my-directive>自定义指定令内容</my-directive>

  <!-- 模板代码 -->
  <script type="text/ng-template" id="template.html">
   <div> 模板内容</div>
   <div ng-transclude></div>//模板接收上面自定义指令间的内容
  </script>
 </div>

 <script>
  //创建模块
  var app = angular.module('myApp', []);
  //创建控制器
  app.controller('myController', function($scope) { });
  //创建自定义指令
  app.directive("myDirective", function() {
   return {
    templateUrl : "template.html",
     transclude : true//转移到模板中
   };
  });
 </script>
</body>

上述实例dom节点截图:

 <div ng-app="myApp" ng-controller="myCtrl">
  Date format: <input ng-model="format"> <hr/>
  Current time is: 
 </div>

7.link与compile的区别

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

自定义属性的四种类别

<div class="wp-20" ng-controller="AppStatisticController" ng-cloak>
 <div class="panel-footer">
  <s-pagination conf="paginationConf"></s-pagination>
 </div>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

输出结果:

之所以展示这个代码,主要是给一些朋友看看真实的项目,,多余的东西删掉了,具体的注入这里就不在讲了。

1、restrict:EACM的子集的字符串,它限制directive为指定的声明方式。

templateUrl html 结构:

//自定义指令
 app.directive('expander',function(){
  return {
   templateUrl : 'template.html',
   replace : true,
   transclude : true,
   require : '^?firstDirective',//引用其他自定义指令,^表示从父节点开始找,?表示将告诉$compile服务,如果所需的指令没找到,不要抛出异常
   scope : {
    title : '=attribute'
   },
   link : function(scope,element,attris,firstDirct){//注入
    console.log(firstDirct.a)//调用其他指令的变量
    console.log(firstDirct.getData(6)) //调用其他指令的方法    
   }
  };
 });

2、默认情况下,directive将仅仅允许通过属性声明,ECA较常用。

说明: 可见 不同的controller
有不同的作用范围。虽然指令一样,每次渲染都是分离的,所以我们可以抽象出来指令,用于html模板和代码的重用,封装。但是这样又不是很好,因为用了两个controller,我们可以使用指令中的scope而不是controller里的scope来替代,具体做法是将外部的scope
映射到指令内部的scope, 如下:

angularjs规定了模板还可以用<Script>标签定义:

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.format = 'M/d/yy h:mm:ss a';
  }])
  .directive('myCurrentTime', function($interval, dateFilter) {
    return {
     restrict: 'AE',
     link: function(scope, element, attr){
       var format, timeoutId;

      /* 更新时间函数 */
      function updateTime() {
       element.text(dateFilter(new Date(), format));
      }

      /* 监视时间格式的改变 */
      var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) {
       format = value;
       updateTime();
      });

      /* 定时器 */
      timeoutId = $interval(function() {
       updateTime(); // update DOM
      }, 1000);

      /* 页面跳转后移除定时器防止内存泄露 */
      element.on('$destroy', function() {
       $interval.cancel(timeoutId);
       attrWatch(); // 移除watch
      });
    }
   };
  });
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
 return {
  restrict : "A",//只能通过属性调用
  template : "<h1>自定义指令!</h1>"
 };
});

不同的templateUrl ②

有多个模板时,我们可以将所有的模板集中在一个文件中,只需加载一次,然后根据id的不同调用不同的模板。

分为: 元素E,属性A,注释M,类C , 分别如下:

调用自定义指令时,需要在HTMl 元素上添加自定义指令名。

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
   };
  }])
  .directive('myCustomer', function() {
   return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
   };
  });

控制器代码:

您可能感兴趣的文章:

  • 深入讲解AngularJS中的自定义指令的使用
  • 详解AngularJS中自定义指令的使用
  • AngularJS优雅的自定义指令
  • AngularJS创建自定义指令的方法详解
  • AngularJS
    自定义指令详解及示例代码
  • AngularJS自定义指令之复制指令实现方法

html页面调用自定义指令的四种方式

javascript 结构:

注意:当调用link 方法时, 通过值传递(”@”)的scope
变量将不会被初始化,它们将会在指令的生命周期中另一个时间点进行初始化,如果你需要监听这个事件,可以使用scope.$watch
方法。

 <div ng-app="myApp" ng-controller="myCtrl">
   <my-customer info="naomi"></my-customer>
 </div>
"use strict";//严格

define(["application-configuration", "s-pagination", "tableDataService"], function (app) {
 app.register.controller("AppStatisticController", ["$scope", "$rootScope", "$stateParams","$http", "tableDataService",
  function($scope, $rootScope, $stateParams, $http, tableDataService) {  

   var getTableDataSuccess = function(result) {
    if(result.c == 1) {
     $scope.title = result.title;
     $scope.lists = result.pageList;
     $scope.total = result.data;
     $scope.paginationConf.totalItems = result.total;
    }else if(result.c == 2){
     //弹出框,没有查到数据 
    } else {
     alert(result.i);
    }
   };

   var getTableDataError = function(result) {
    alert(result);
   };
   /*重要的代码,这个paginationConf与自定义指令双向绑定数据*/
   $scope.paginationConf = {
    currentPage: 1,
    itemsPerPage: 10,
    pagesLength: 9,
    search: false,
    onChange: function() {
     var param = {
      "pageNo": this.currentPage,
      "pageSize": this.itemsPerPage,
      "timeType": $scope.formData.timeType,
      "adStyle":$scope.formData.adStyle,
     };
     param.appId = $stateParams.appId;
     tableDataService.getTableData(
      param,
      "ims/appStat.do",
      getTableDataSuccess,
      getTableDataError
     );
    }
   };

   $scope.$watch("formData",function(newValue,oldValue, scope) {
    if(newValue.keywords == oldValue.keywords) {
      $scope.paginationConf.search = true;
    }
   }, true);

  }]);
});

 Name: Naomi Address: 1600 Amphitheatre
 Name: Igor Address: 123 Somewhere

注意打印结果:

javascript结构:

/**
 * 分页插件封装s-pagination.js
 * @date 2016-05-06
 * @author Peter
 */

angular.module('s.pagination', []).directive('sPagination',[function(){//自定义指令
 return {
  restrict: 'E',//仅限元素名调用
  template: '<div class="page-list">' +
  '<ul class="pagination" ng-show="conf.totalItems > 0">' +
  '<li ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()">«</li>' +
  '<li ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +
  'ng-click="changeCurrentPage(item)">' +
  '{{ item }}' +
  '</li>' +
  '<li ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()">»</li>' +
  '</ul>' +
  '<div class="page-total" ng-show="conf.totalItems > 0">' +
  '第<input type="text" ng-model="jumpPageNum" ng-keyup="jumpToPage($event)"/>页 ' +
  '每页<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions "></select>' +
  '/共<strong>{{ conf.totalItems }}</strong>条' +
  '</div>' +
  '<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
  '</div>',
  replace: true,
  scope: {
   conf: '='//双向绑定数据
  },
  link: function(scope, element, attrs){
   // 变更当前页
   scope.changeCurrentPage = function(item) {
    if(item == '...'){
     return;
    }else{
     scope.conf.currentPage = item;
    }
   };

   // 定义分页的长度必须为奇数 (default:5)
   scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 5 ;
   if(scope.conf.pagesLength % 2 === 0){
    // 如果不是奇数的时候处理一下
    scope.conf.pagesLength = scope.conf.pagesLength -1;
   }

   // conf.erPageOptions
   if(!scope.conf.perPageOptions){
    scope.conf.perPageOptions = [10, 20, 30, 40, 50];
   }

   // pageList数组
   function getPagination(newValue, oldValue) {
    //新增属性search 用于附加搜索条件改变时触发
    if(newValue[1] != oldValue[1] || newValue[2] != oldValue[2]) {
     scope.conf.search = true;
    }
    // conf.currentPage
    scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1;

    // conf.totalItems
    scope.conf.totalItems = parseInt(scope.conf.totalItems) ? parseInt(scope.conf.totalItems) : 0;

    // conf.itemsPerPage (default:15)
    scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;

    // numberOfPages
    scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems/scope.conf.itemsPerPage);

    // judge currentPage > scope.numberOfPages
    if(scope.conf.currentPage < 1){
     scope.conf.currentPage = 1;
    }

    // 如果分页总数>0,并且当前页大于分页总数
    if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages){
     scope.conf.currentPage = scope.conf.numberOfPages;
    }

    // jumpPageNum
    scope.jumpPageNum = scope.conf.currentPage;

    // 如果itemsPerPage在不在perPageOptions数组中,就把itemsPerPage加入这个数组中
    var perPageOptionsLength = scope.conf.perPageOptions.length;
    // 定义状态
    var perPageOptionsStatus;
    for(var i = 0; i < perPageOptionsLength; i++){
     if(scope.conf.perPageOptions[i] == scope.conf.itemsPerPage){
      perPageOptionsStatus = true;
     }
    }
    // 如果itemsPerPage在不在perPageOptions数组中,就把itemsPerPage加入这个数组中
    if(!perPageOptionsStatus){
     scope.conf.perPageOptions.push(scope.conf.itemsPerPage);
    }

    // 对选项进行sort
    scope.conf.perPageOptions.sort(function(a, b){return a-b});

    scope.pageList = [];
    if(scope.conf.numberOfPages <= scope.conf.pagesLength){
     // 判断总页数如果小于等于分页的长度,若小于则直接显示
     for(i =1; i <= scope.conf.numberOfPages; i++){
      scope.pageList.push(i);
     }
    }else{
     // 总页数大于分页长度(此时分为三种情况:1.左边没有...2.右边没有...3.左右都有...)
     // 计算中心偏移量
     var offset = (scope.conf.pagesLength - 1)/2;
     if(scope.conf.currentPage <= offset){
      // 左边没有...
      for(i =1; i <= offset +1; i++){
       scope.pageList.push(i);
      }
      scope.pageList.push('...');
      scope.pageList.push(scope.conf.numberOfPages);
     }else if(scope.conf.currentPage > scope.conf.numberOfPages - offset){
      scope.pageList.push(1);
      scope.pageList.push('...');
      for(i = offset + 1; i >= 1; i--){
       scope.pageList.push(scope.conf.numberOfPages - i);
      }
      scope.pageList.push(scope.conf.numberOfPages);
     }else{
      // 最后一种情况,两边都有...
      scope.pageList.push(1);
      scope.pageList.push('...');

      for(i = Math.ceil(offset/2) ; i >= 1; i--){
       scope.pageList.push(scope.conf.currentPage - i);
      }
      scope.pageList.push(scope.conf.currentPage);
      for(i = 1; i <= offset/2; i++){
       scope.pageList.push(scope.conf.currentPage + i);
      }

      scope.pageList.push('...');
      scope.pageList.push(scope.conf.numberOfPages);
     }
    }

    if(scope.conf.onChange){
     //请求数据
     if(scope.conf.search) {
      scope.conf.onChange();
      scope.conf.search = false;
     }

    }
    scope.$parent.conf = scope.conf;
   }

   // prevPage
   scope.prevPage = function(){
    if(scope.conf.currentPage > 1){
     scope.conf.currentPage -= 1;
    }
   };
   // nextPage
   scope.nextPage = function(){
    if(scope.conf.currentPage < scope.conf.numberOfPages){
     scope.conf.currentPage += 1;
    }
   };

   // 跳转页
   scope.jumpToPage = function(){
    scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g,'');
    if(scope.jumpPageNum !== ''){
     scope.conf.currentPage = scope.jumpPageNum;
    }
   };

   scope.$watch(function() {

    if(!scope.conf.totalItems) {
     scope.conf.totalItems = 0;
    }
    if(angular.isUndefined(scope.conf.search)) {
     scope.conf.search = false;
    }

    var newValue = [scope.conf.totalItems, scope.conf.currentPage, scope.conf.itemsPerPage, scope.conf.search];
    return newValue;
   }, getPagination, true);
  }
 };
}]);

创建一个用于操作dom的指令,如果需要dom操作也都应该放在指令里。

符号 说明 示例
@ 值传递,单向绑定。html页面自定义指令里的val属性的值可传给link的scope使用。第一种写法——str : “@”,这种写法html页面的指令属性名为str str : “@val”,属性名为val
= 双向绑定数据到指令的属性中,数据值可以是任意类型的。第一种写法:name : “=”,这种写法html页面的自定义指令属性名就是name name : “=username”,属性名是username
& 使用父作用域中的一个函数,可以在指令中调用。第一种写法:getName:”&”,这种写法html页面的自定义指令属性名就是gegName getName : “&getUserName”,属性名是getUserName

  templateUrl html结构:

调用该自定义指令的指令需要放在该指令之间。假定firstDirective指令是要被调用的自定义指令,expander是调用者指令。如下:

说明: templateUrl
的值可以是一个函数返回值,返回用于指令中的html模板的url。

调用其他指令的自定义指令必须配置require属性指定指令名。然后在link函数里就可注入要调用的指令。

编译后的html结构:

上面代码写在html页面的ng-controller指令所在标签的里面,这样就不用再去请求它了。示例:

<div ng-app="myApp" ng-controller="myCtrl">
 <my-customer info="naomi"></my-customer>
 <my-customer info="igor"></my-customer>
</div>
<!-- =符号的用法-->
<body >
 <div ng-app="myApp" ng-controller="myController">
  <!-- 引用自定义指令:obj变量与控制器里的objc变量双向绑定了值 -->
  <my-directive speak="obj"></my-directive>
 </div>

 <script>
  //创建模块
  var app = angular.module('myApp', []);

  //创建控制器
  app.controller('myController', function($scope) { 
   $scope.obj="父作用域";//父作用域给自定义指令属性赋的值
  });

  //创建自定义指令
  app.directive("myDirective", function() {
   return {
    template : "<p>模板内容</p>",
    scope:{
     title:"=speak"//定义一个speak属性供html页面的自定义指令用。如果写成title:"="格式,则自定义指令里的属性名就是title。
    },
    link: function postLink(scope, iElement, iAttrs) {
     console.log(scope.title)//这里打印的值与控制器里的值一样
    }
   };
  });
 </script>
</body>

简单创建一个指令

restrict值的不同,决定了调用方式的不同

JavaScript结构:

5.controller属性

javascript结构:

既然firstDirective内部还有指令,则firstDirective必须配置transclude属性为true。代码如下:

Name: Naomi Address: 1600 Amphitheatre
Name: Address:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body >
 <div ng-app="myApp" ng-controller="myController">

  <!-- 引用自定义指令 -->
  <my-directive></my-directive>

  <!-- 模板代码:须放在myController所在标签内部 -->
  <script type="text/ng-template" id="template.html">
   <div> 自定义指令模板的templateUrl形式</div>
  </script>
 </div>

 <script>
  //创建模块
  var app = angular.module('myApp', []);
  //创建控制器
  app.controller('myController', function($scope) { });
  //创建自定义指令
  app.directive("myDirective", function() {
   return {
    restrict:'E',
    templateUrl : "template.html"
   };
  });
 </script>
</body>

</html>
Name: {{customerInfo.name}} Address: {{customerInfo.address}}
<br>
Name: {{vojta.name}} Address: {{vojta.address}}

前言

 Name: {{customer.name}}

controller属性用于提供对外的接口,即该自定义指令会被其他自定义指令调用。所谓的接口,就是this后的变量或方法。

 <div class="alert" ng-transclude></div>

AngularJS内置指令的用法:ng-model=”obj”,通过obj这个变量双向绑定值,controller里变了,html页面也跟着变化。这说明,内置指令不仅可作为属性,还可动态改变值,这个要是不懂的,看看基础语法。如下代码:

可操作DOM的指令

//用于被调用的自定义指令
 app.directive('firstDirective',function(){
  return {
   template : '<div ng-transclude></div>',
   replace : true,
   transclude : true,
   controller :function(){
    this.getData = function(val){
      var data = 3 * val;
     return data;
    }
    this.a = "abc";
   }
  }
 });
 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
   $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    scope: {
     customerInfo: '=info'
    },
    templateUrl: 'my-customer-iso.html'
   };
  });

scope:
它与自定义指令里的scope属性是一个东西。它是指令scope的引用,所以可改名为sco等其他名字。scope
变量在初始化时是不被定义的,link 方法会注册监视器监视值变化事件。

html结构:

<!-- @符号的用法 -->
<body >
 <div ng-app="myApp" ng-controller="myController">
  <!-- 引用自定义指令 -->
  <my-directive title="obj" str="abcd">自定义指定令的内容555</my-directive>
 </div>

 <script>
  //创建模块
  var app = angular.module('myApp', []);
  //创建控制器
  app.controller('myController', function($scope) { 
   $scope.obj="父作用域";//父作用域给自定义指令属性赋的值
  });
  //创建自定义指令
  app.directive("myDirective", function() {
   return {
    template : "<p >模板内容</p>",
    scope:{
     title:"=",
     str:"@"
    },
    link: function postLink(scope, iElement, iAttrs) {
     console.log(scope.str)
     console.log(scope.title)
    }
   };
  });
 </script>
</body>



<!-- &符号的用法 -->
<body >
 <div ng-app="myApp" ng-controller="myController">
  <!-- 引用自定义指令 -->
  <my-directive fun="test()"></my-directive>
 </div>

 <script>
  //创建模块
  var app = angular.module('myApp', []);
  //创建控制器
  app.controller('myController', function($scope) { 
   $scope.test = function(){
     console.log('自定义指令会调用该法,所以这句话会打印到控制台上')
   }
  });
  //创建自定义指令
  app.directive("myDirective", function() {
   return {
    template : "<p >模板内容</p>",
    scope:{
     fun:"&"//属性名直接是fun
    },
    link: function postLink(scope, iElement, iAttrs) {
     scope.fun();//调用父作用域的方法,好似不能传参,未深究。
    }
   };
  });
 </script>
</body>

templateUrl html结构:

<body >
 <div ng-app="myApp" ng-controller="myController">  
  <my-directive></my-directive><!-- 引用自定义指令 -->
 </div>

 <script>
  //创建模块
  var app = angular.module('myApp', []);
  //创建控制器
  app.controller('myController', function($scope){ });
  //创建自定义指令
  app.directive("myDirective", function() {
   return {
    template : "<h1>自定义指令!</h1>"
   };
  });
 </script>
</body>

html结构:

在html页面调用该指令时需要以 – 分割,如: my-directive。示例代码:

 Address: {{customer.address}}
属性值 调用方式 示例
A (Attribute首字母) 属性名 <div my-directive></div>
C (Class 首字母) 类名 <div class=’my-directive’></div>
E (Element 首字母) 元素名 <my-directive></my-directive>
M 注释 <!– 指令: my-directive>

restrict 默认值为 EA, 即在html页面可通过元素名和属性名来调用自定义指令。

pre会在所有compile执行完后且在所有post之前执行。这样可以在执行post前执行一些其他代码,有些类似AOP。