AngularJS之指令

紧接上篇博客“初探AngularJS”

一、前言

在AngularJS中指令尤为重要且内容庞多，固单独提炼出来，梳理一番。如有错误，请不吝讲解。

好了，言归正传，让我们一起走进Angular指令的世界。

在上篇博客的前言部分提到，Angular的核心就是对HTML标签的增强。我们用到的诸如ng-app、ng-controller等等这些都是属于Angular指令，具体点，它们为Angular内置的指令。

Angular不仅提供了内置指令，它还允许我们自定义指令，不然Angular就太low咯。

这也是本篇博客的核心：如何自定义指令。

该篇博客原文地址：http://www.cnblogs.com/giggle/p/5746220.html

二、自定义指令

Angular为我们提供了.directive()这个方法，来定义指令。

如下：

AngularJS之指令

正如上述代码所示，directive方法接受两个参数：name和factory_function。

　　--name嘛，即为指令的名字，供我们调用时使用；

　　--factory_function就是当我们调用指令时，指令的实际行为，并且factory_function通常返回一个对象，里面通过规定的设置项来定义指令。

那么自定义指令中，我们都可以操作哪些设置项呢？

如下：

var app = angular.module('myApp', []);
app.directive('myDirective', function(){
            
    return {
        restrict: 'EACM',//告诉AngularJS这个指令在DOM中以何种形式被声明，默认为A
        priority: Number,//优先级参数（值为数值），数值越大，优先级越高，默认为0
        terminal: Boolean,//true或者false，告诉AngularJS是(true)否(false)停止运行当前元素上比本指令优先级低的指令
        template: String or Template Function,//模板
        templateUrl: String,//模板URL
        replace: Boolean,//值为true,代表模板会替换掉调用该指令的元素
        scope: Boolean or Object,//指令作用域
        transclude: Boolean,//true,结合ng-transclude，在该指令中嵌入内容
        controller: String or function($scope, $element, $attrs, $transclude, otherInjectables){...},//指令控制器
        controllerAs: String,//用来设置控制器的别名
        require: String,//将控制器注入到其值所指定的指令中
        link: function(scope, element, attrs){...},
        compile: function(){}               
    };
});

代码稍长，请自行打开