angular directive的使用

app = angular.module("app",[]);
//1.E element 元素节点 <hello></hello>
app.directive("hello",function(){
    return {
            restrict : 'E',
            template : '<div> Hello Angular</div>'
    }
})

//2.A attribution 属性 <div alertAttribution = "ddd" ></div> 
app.directive('alertAttribution',function(){

    return {
         restrict : 'A',
         link:function(){
         alert('directive 属性');
            }
        }
})
//3.C class 属性<div class="classValue"></div>
app.directive("classValue",function(){
return {
         restrict : 'C',
         link:function(){
         alert('directive class属性');
            }
        }

})

 

2.directive属性的使用<div enter = "loadMoreData()"> {{msg}}</div>
app = angular.module("app",[]);

app.controller("myCtrl",function($scope){
    $scope.msg = "I am here too";
    $scope.loadMoreData=function(){
        alert('loadMoreData');
    };
});

app.directive('enter',function(){
    return {
         restrict: 'A',
         link:function(scope,element,attrs){
         //scope就是外边那个controller的边界作用域 ，element当前标签节点 ，attrs节点的属性
            element.bind('mouseenter',function(){
            scope.$apply(attrs.enter); //$apply类似oc的运行池或者java的反射，用字符串调用方法
        }) ;
     }
    }
})

 

3.directive之间的使用
app = angular.module("app",[]);

app.directive('food',function(){

return {
    restrict :'E',
    scope:{},//没理解到为什么要用这个来清空，难道是多个节点之间共用controller，那属性就是什么时候执行就是个问题
    controller:function($scope){
        $scope.foods=[];
        this.addApple=function(){
            $scope.foods.push('apple')
        }
         this.addOrange=function(){
            $scope.foods.push('orange')
        }
         this.addBanana=function(){
            $scope.foods.push('banana')
        }
    },
    link:function(scope,element,attrs){//当然elelment元素的方法不只这几个，方法如附件1
     element.bind('mouseenter',function(){
        console.log(scope.foods);
     })
    }


}

})

app.directive('apple',function(){
    return{//默认为属性，非元素节点或者class
        require: 'food',
        link:function(scope,element,attrs,foodCtrl){
            foodCtrl.addApple()
        }
    }
})

app.directive('orange',function(){
    return{
        require: 'food',
        link:function(scope,element,attrs,foodCtrl){
            foodCtrl.addOrange()
        }
    }
})

app.directive('banana',function(){
    return{
        require: 'food',
        link:function(scope,element,attrs,foodCtrl){
            foodCtrl.addBanana()
        }
    }
})

 //结果   <food apple>所有食物</food> <br/> 输出苹果
 //       <food apple orange>所有食物</food><br/>//输出苹果和橘子
 //       <food apple orange banana>所有食物</food> 输出苹果，橘子和香蕉

附件1
addClass: (c,e,f)
after: (c,e,f)
append: (c,e,f)
attr: (a,d)
bind: (c,e,f)
children: (c,e,f)
clone: (c,e,f)
contents: (c,e,f)
controller: (a,d)
css: (a,d)
data: (a,d)
detach: (c,e,f)
empty: (a,d)
eq: (b)
find: (c,e,f)
hasClass: (a,d)
html: (a,d)
inheritedData: (a,d)
injector: (a,d)
isolateScope: (a,d)
length: 0
next: (c,e,f)
off: (c,e,f)
on: (c,e,f)
one: (c,e,f)
parent: (c,e,f)
prepend: (c,e,f)
prop: (a,d)
push: push()
ready: (b)
remove: (c,e,f)
removeAttr: (a,d)
removeClass: (c,e,f)
removeData: (c,e,f)
replaceWith: (c,e,f)
scope: (a,d)
sort: sort()
splice: splice()
text: (a,d)
toString: ()
toggleClass: (c,e,f)
triggerHandler: (c,e,f)
unbind: (c,e,f)
val: (a,d)
wrap: (c,e,f)