AngularJs自定义指令的详解

1.angularJs中提供了很多内置指令,它还有很强大的功能就是自定义指令

指令:我们可以理解为在特定DOM上运行的函数,指令可以控制这个元素的功能,正是指令使得angularJs这个框架变得强大

我们可以用directive()这个方法用来定义指令

directive()指令可以接受两个参数

1> name(字符串)指令的名字用来在视图中引用特定的指令

2>factory_function(函数) :这个函数返回的是一个对象,其中定义了指令的全部行为.

2.定义指令行为的相关属性键值对

angular.module('myApp', [])
.directive('myDirective', function() {
return {

//它告诉AngularJS这个指令在DOM中可以何种形式被声明默认是是A 以属性的形式进行声明
restrict: String,
priority: Number,//优先级
terminal: Boolean,//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令
template: String or Template Function: //一段HTML文本；
function(tElement, tAttrs) (...},
templateUrl: String,//用于将’其他html’文件渲染进入含有对应指令的html中。当然这里的’其他html’里面可以有我们的指令或者表达式，其实就是代码段，和在当前页面一样使用，只是抽离出去了，方便管理。这里会用异步请求的方式来得到这个文件。注意：此处会发送一个xhr请求。
replace: Boolean or String,//，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部：
scope: Boolean or Object, 比如scope :true 如果为true 则指令模板可以访问外部作用域的或 scope :{} 这样指令模板无法访问外部作用域主要因为隔离作用域的原因
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,可以给controller 起个别名简化操作
require: String,require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。
link: function(scope, iElement, iAttrs) { ... },//进行DOM 操作
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }

<!DOCTYPE html>
<!-- 这里是初试化anglularJs 的一个应用程序 -->
<html>
<head>
<meta charset="UTF-8">
<title>初识自定义指令</title>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
</head>
<body>
    <div ng-app="myApp">
      <div ng-include="child.html"></div>
      <div my-info name="names"
           add="changeData(name)"
      ></div>
    </div>
</body>
<script type="text/javascript">
     //在自定义标签中定义行为
     angular.module('myApp')
     .directive('myInfo', function(){
         return {
             restrict: 'EA', //E表示element, A表示attribute,C表示class，M表示commnent,即注释
             scope:{
                 name: '@' //@读属性值，=双向绑定，&用户函数
                 add:'&'//允许外部scope传递一个函数给封闭的scope
             }
             template: '<div>{{ name }}</div>'+'<button ng-click="action()">Change Data</button>',
             templateUrl: 'app/sample.html',
             controller: function($scope){
                 $scope.changeData=function(){
                     //调用外部的scope的函数                   
                     var name="good data";
                     //给函数传参
                     $scope.add({name:name });
                 }
             },
             link:function($scope, element, attrs){}//DOM操作
         };
     })
//注意 默认情况下,自定义的directive是共享父scope,但是有时候我们希望自定义的directive的scope是封闭的,独立的
//比如下网自定的directive用在多处.
// 1.使用@,外部赋值不影响封闭scope的变量
// 2.使用=,外部scope赋值会影响封闭scope变量
// 3.使用&，允许外部scope传递一个函数给封闭scope  这个函数还可以传入相应的参数
// 4.允许自定义的directive被嵌套 要把tranclude设置为true就可以了.

</script>
</html>

aqlserver的分页