controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令,允许指令之间进行交互,如前面的例子。
注意:当调用link 方法时, 通过值传递(”@”)的scope 变量将不会被初始化,它们将会在指令的生命周期中另一个时间点进行初始化,如果你需要监听这个事件,可以使用scope.$watch 方法。
7.link与compile的区别
compile函数有三个参数(cElement,cAttrs,cLinker),使用compile函数可以在ng创建原始dom实例以及创建scope实例之前,改变原始的dom(template element);可以应用于当需要生成多个element实例但只有一个template element的情况,ng-repeat就是一个最好的例子。它就在是compile函数阶段改变原始的dom生成多个原始dom节点,然后每个又生成element实例。因为compile只会运行一次,所以当你需要生成多个element实例的时候是可以提高性能的。
link函数有五个参数(scope,element,attrs,ctrl,linker)。
link又分为pre-link和post-link,在代码里直接用pre和post表示,当我们直接使用link时,默认跟post一样。我在网上找了个例子来说明一下区别,代码如下:
<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>
注意打印结果:
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>
分析打印结果:
运行levelone指令中的compile函数,ng就会递归遍历它的dom节点,然后在level-two与level-three上面重复这些操作。所以会依次打印连续三个compile。
pre会在所有compile执行完后且在所有post之前执行。这样可以在执行post前执行一些其他代码,有些类似AOP。
由上面结果可知,post的执行顺序却是先levelthree最后levelone,即反向调用相关联的post-link函数。这么做的好处是,当我们运行levelone时,保证leveltwo与levelthree都已经执行过了,这样就会更安全。所以默认的link就是post。
一个我做过的分页例子
之所以展示这个代码,主要是给一些朋友看看真实的项目,,多余的东西删掉了,具体的注入这里就不在讲了。
html页面代码:
<div ng-controller="AppStatisticController" ng-cloak> <div> <s-pagination conf="paginationConf"></s-pagination> </div> </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); }]); });
自定义指令代码:也算是angularJS的分页插件