摘要：自定義指令中有很多內(nèi)置指令，一般都是以開頭的比如等等。本文介紹的自定義指令的用法。該參數(shù)的意思是替換指令的內(nèi)容，更改上面的例子。將屬性綁定到父控制器的域中學(xué)習(xí)概念多指令中的參數(shù)中增加了的值和的點擊函數(shù)。

angularjs中有很多內(nèi)置指令，一般都是以ng開頭的；比如：ng-app,ng-click,ng-repeat等等。本文介紹angularjs的自定義指令的用法。

首先在html標(biāo)簽處設(shè)置ng-app的屬性值，然后在js文件中就可以調(diào)用angular.module得到一個module，最后就可以用module.directive定義一個指令。代碼如下：

html文件

js文件

var app = angular.module("directive",[]);
app.directive("myDirective",function(){
   return {
       restrict:"A",
       require:true,
       template:"hello angular",
   };
});

這個例子只使用了directive的最簡單的參數(shù)配置，下面是一個詳細(xì)的參數(shù)配置列表

app.directive("myDirective", function factory(injectables) {
    return {
        restrict: string,//指令的使用方式，包括標(biāo)簽，屬性，類，注釋
        priority: number,//指令執(zhí)行的優(yōu)先級
        template: string,//指令使用的模板，用HTML字符串的形式表示
        templateUrl: string,//從指定的url地址加載模板
        replace: bool,//是否用模板替換當(dāng)前元素，若為false，則append在當(dāng)前元素上
        transclude: bool,//是否將當(dāng)前元素的內(nèi)容轉(zhuǎn)移到模板中
        scope: bool or object,//指定指令的作用域
        controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定義與其他指令進行交互的接口函數(shù)
        require: string,//指定需要依賴的其他指令
        link: function postLink(scope, iElement, iAttrs) {...},//以編程的方式操作DOM，包括添加監(jiān)聽器等
        compile: function compile(tElement, tAttrs, transclude){
            return: {
                pre: function preLink(scope, iElement, iAttrs, controller){...},
                post: function postLink(scope, iElement, iAttrs, controller){...}
            }
        }
    };
});

下面介紹幾個常用的參數(shù)

四個值"A","E","C","M"，分別代碼屬性，標(biāo)簽，類，注釋，如下：

restrict:"A"   

restrict:"E"   
restrict:"C"   

restrict:"M"   

只測試了A和E的值，感興趣的朋友可以測試一下其他。

這兩個參數(shù)只需要設(shè)置一個就行。

該參數(shù)的意思是替換指令的內(nèi)容，更改上面的例子。html更改部分

hello angular

js更改部分

 app.directive("myDirective",function(){
    return {
        restrict:"A",
        require:true,
        transclude:true,//增加transclude參數(shù)的設(shè)置
        template:"
",//將指令的內(nèi)容替換到span標(biāo)簽下
    };
 });

false               默認(rèn)值。使用父作用域作為自己的作用域
true                新建一個作用域，該作用域繼承父作用域
javascript對象       

當(dāng)scope為javascript對象時，鍵值對的形式定義。直接看例子吧！
html：

    
    
    
    


    

        
{{text}}
    

js:

var app = angular.module("directive",[]);
app.directive("myDirective",function(){
    return {
        restrict:"A",
        template:"
{{mytitle}}
",
        require:true,
        replace:true,
        transclude:true,
        //將etitle屬性綁定到父控制器的scope域中
        scope:{
            mytitle:"=etitle"
        },
    }
});
app.controller("directive",function($scope){
    $scope.title = "學(xué)習(xí)";
    $scope.text = "angular js概念多";
});

link的值是一個function，一般用在在dom上綁定動作的。請看下面實現(xiàn)的一個折疊面板的例子。

    
    
    
    


    

        {{text}}
    

var app = angular.module("directive",[]);
app.directive("expander",function(){
    return {
        restrict:"E",
        template:"
{{mytitle}}
",
        require:true,
        replace:true,
        transclude:true,
        //將etitle屬性綁定到父控制器的scope域中
        scope:{
            mytitle:"=etitle"
        },
        link: function(scope,element,attr,accordionCtrl){
            scope.showText = false;
            scope.toggleText = function(){
                scope.showText = ! scope.showText;
            }
        }
    }
});
app.controller("directive",function($scope){
    $scope.title = "angular 學(xué)習(xí)";
    $scope.text = "angular js概念多";
});

expander指令中的link參數(shù)中增加了showText的值和toggleText的點擊函數(shù)。

最后，再看一個多個折疊面板的例子

    
    
    
    


    

        
            {{expander.text}}
        
    

ng-repeat便利expanders的所有元素

var app = angular.module("directive",[]);
app.directive("expander",function(){
    return {
        restrict:"E",
        template:"
{{mytitle}}
",
        require:"^?accordion",
        replace:true,
        transclude:true,
        //將etitle屬性綁定到父控制器的scope域中
        scope:{
            mytitle:"=etitle"
        },
        link: function(scope,element,attr,accordionCtrl){
            scope.showText = false;
            accordionCtrl.addExpander(scope);
            scope.toggleText = function(){
                scope.showText = ! scope.showText;
                accordionCtrl.getOpened(scope);
            }
        }
    }
});
app.controller("directive",function($scope){
    $scope.expanders = [
        {title:"angular",text:"angular js概念多"},
        {title:"react",text:"react + reduce + ui路由機制"}
    ];
});

app.directive("accordion",function(){
   return {
       restrict:"E",
       template:"
",
       replace:true,
       transclude:true,
       controller:function(){
           var expanders = [];

           this.getOpened = function(selectExpander){
               angular.forEach(expanders,function(e){
                    if (selectExpander != e){
                        e.showText = false;
                    }
               });
           }

           this.addExpander = function(e){
               expanders.push(e);
           }
       }
   }
});

demo源碼地址