angularjs 之 directive

这片文章为directive的基本的用法。

1.directive的定义

angular.module("app",[]).directive("directiveName",function(){

return{

//通过设置项来定义

};

})

2.directive的声明方式

E：元素

A：属性

C：样式

D：注释

目前我自己经历过的项目中没见过过第四种写法，前两种声明方式比较常见。

3.directive 的template和templateUrl参数

angular.module("app",[]).directive("hello",function(){                

    return{                

         restrict:'EA',                

         template:"

            hello world

         "                

    };            

})

template内容可以用templateUrl替换，建议使用后者。

4.replace参数

设为true后，指令所在位置都会被template或者templateUrl替换。

5.transclude参数

var appModule = angular.module('app', []);    

appModule.directive('hello', function() {    

    return {        

        restrict: 'E',        

        template: '在前面的',        

        transclude: true    

    };

});

被指令包裹的内容会在template下面显示。

   

     后面

界面会显示：

在前面的

后面

5.scope

可选参数，（布尔值或者对象）默认值为false，可能取值：

（1）默认值false。

表示继承父作用域;

（2）true

表示继承父作用域，并创建自己的作用域（子作用域）;父亲改了子也该，子改了父亲不改。

（3）{}

表示创建一个全新的隔离作用域；各自有各自作用域。

当设置为｛｝时，两个作用域分开了，如何在两个directive上传参数呢？

scope: {

    color: '@'

}

单向传参。

scope:{

    color:'='

}

双向传参

scope:{

    saysomething:'&',

},

函数的传递

6.compile和link

compile阶段进行标签解析和变换，link阶段进行数据绑定等操作。可在link上进行事件绑定。