angular directive

强大的工具来操 作和修改DOM

本来没想把directive写成一章的，但是发现内容越来越多～只能单拿出来拉，hiahia

template

使用方式如下，其中restrict可以分为E(element),A(attribute，如果不声明restrict，默认是A),C(Class) & M(comment 在html中的使用方式<!-- directive: hello-->)

appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<div>Hi there</div>',
        replace: true
    };
});

当然了，除了可以动态修改和操作Dom，directive另外一个好处，和service一样，作为一个公共的组件，可以让多个controller共用

 knowledge

directive存在的背后，是一个叫做$compile的服务

www.tuicool.com/articles/yMZzmm

Compiler作为Angular的一个服务（Service），负责遍历DOM结构，寻找属性。编译过程分成两个阶段：
1. 编译（Compile）：遍历DOM节点树，收集所有directives。返回结果是一个链接函数（linking function）。
2. 链接（Link）：将directives绑定到一个作用域（scope）中，创建一个实况视图（live view）。在scope中的任何改变，将会在视图中得到体现（更新视图）；任何用户对模版的活动（改变），将会体现在scope model中（双向绑定）。这使得scope model能够反映正确的值。
一些directives，诸如ng-repeat，会为每一个在集合（collection）中的元素复制一次特定的元素（组合）。编译和链接两个阶段，使性能得以提升。因为克隆出来的模版(template)只需要编译一次，然后为每一个集合中的元素进行一次链接（类似模版缓存）。

behavior

所以，directive除了绑定上面例子中template，还可以提供behavior，即function，一般是link：function，这种方式可以直接去掉link字段简写为function

这里的link和上面的link的区别，请参考上面链接。

scope

只有定义了scope，哪怕为空，也可以避免掉同一个directive同一个作用域，修改一个，其他全变的问题～

scope有几个修饰符

”＝“：指令中的属性取值为controller中对应$scope上属性的取值，可用于双向数据的绑定
”@“：指令中的取值为html中的字面量/直接量；建立一个local scope property到DOM属性的绑定。因为属性值总是String类型，所以这个值总是返回一个字符串。如果没有通过@attr指定属性名称，那么本地名称将与DOM属性的名称一直。例如，widget的scope定义为：{localName:’@myAttr’}。那么，widget scope property的localName会映射出”hello {{name}}"转换后的真实值。name属性值改变后，widget scope的localName属性也会相应地改变（仅仅单向，与下面的”=”不同）。
”&“：指令中的取值为Contoller中对应$scope上的属性，但是这属性必须为一个函数回调。

directive communication

directive之间的交互，请看下面例子

var myapp=angular.module("myapp",[]);
myapp.directive("superhero",function(){
    return {
        restrict: "E",
        scope : {},
        controller: function($scope){
            $scope.abilities=[]
            this.addStrength = function(){
                $scope.abilities.push('strength');
            }
            this.addSpeed = function(){
                $scope.abilities.push('speed');
            }
            this.addFlight = function(){
                $scope.abilities.push('flight');
            }
        },
        link: function( scope, element, attrs ) {
            element.addClass("panel");
            element.bind( "mouseenter", function() {
                console.log(scope.abilities);
            });
          }
    }
});
myapp.directive("speed",function(){
    return {
        require: "superhero",
        link:function(scope,element,attrs,superheroCtrl){
            superheroCtrl.addSpeed()
        }
    }
});

angular.element /  compile 

前面介绍了behavior，这里介绍一下complile，我们知道，一般compile做的事情是遍历整个html，将directive收集起来，返回一个链接函数。一般情况都不需要complile，什么时候需要呢？

var myapp=angular.module("myapp",[]);

myapp.directive("dumbPassword",function(){
	return{
		restrict:"E",
		replace: true,
		template:"<div><input type=\"text\" ng_model=\"model.input\"><div>{{model.input}}</div></div>",
		link:function(scope,element){
			scope.$watch("model.input",function(value){
				if(value==="password"){
					element.children(1).toggleClass("main");
				}});
			}}})

如果想要操作dom中的元素，在angular js中没有jquery的findelement类似的元素，只能通过上面的element.children(1）查找，这种方法使得代码变得死板而且不好维护。

这时候就需要引入angular.element，reference一个element，以后对此element进行操作即可；

var myapp=angular.module("myapp",[]);

myapp.directive("dumbPassword",function(){
	var validElement = angular.element("<div>{{model.input}}</div>");
	return{
		restrict:"E",
		replace: true,
		template:"<div><input type=\"text\" ng_model=\"model.input\"></div>",
		compile: function(tElem){
			tElem.append(validElement);
			return function(scope){
				scope.$watch("model.input",function(value){
					if(value==="password"){
						validElement.toggleClass("main");}
					});
			}	
		}
	}
})

zippy example

js code 

var myapp=angular.module("myapp",[]);

myapp.directive("zippy",function(){
	return{
		restrict:"E",
		transclude:true,
		scope:{
			title:"@",
		},
		template:'<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisible" ng-transclude>Hello World</div></div>',
		link:function(scope,element,attrs){
			scope.isContentVisible=false;
			scope.toggleContent=function(){
				scope.isContentVisible=!scope.isContentVisible;
			}
		}
	}
})

html

<div ng-app="myapp"> 
	<input type="text" ng-model="model.title">
	<input type="text" ng-model="model.content">
	<zippy title="{{model.title}}">
		This is the {{model.content}}
	</zippy>
</div> 

template url

为啥把template url放到最后讲呢～没啥原因，就是想要复用一下上面的zippy的例子拉～

其实就是将directive中template写到html中，两种办法，第一

js改动template那段改成templateurl: "zippy.html"

html中的改动 

<script type="text/ng-template" id="zippy.html">
	<div>
		<h3 ng-click="toggleContent()">{{title}}</h3>
		<div ng-show="isContentVisible" ng-transclude>Hello World</div>
	</div>
</script>

和上面的zippy例子一样哒效果～

第二，直接把那段html代码存到zippy.html中就行了

http://www.cnblogs.com/lcllao/archive/2012/09/04/2669802.html