angularjs指令系统系列课程（1）：目录

angularjs里面有一套十分强大的指令系统

比如内置指令：ng-app,ng-model,ng-repeat,ng-init,ng-bind等等

从现在开始我们讲解AngularJS自定义指令，

对于指令的命名；在定义时采用驼峰命名比如:helloDirective,

在页面中调用时会按照大写字母用-进行分割，并将大写字母变成小写：hello-directive

先看一个简单的指令：

js

angular.module('app',{}).directive('helloDirective', function() {
    return {
        template: '<div><span>hello directive</span></div>'
    }
});

html:

<section>
 <div hello-directive></div>
</section>

 

 运行结果：

 审查代码：

 

 

---

 

我们看下AngularJS里新定义一个指令的完整参数写法：

newsApp.directive('newDirective', function() {
    return {
        priority: 0, //优先级
        template: '',
        templateUrl: '', //引入模板链接
        replace: false, //替换
        transclude: false, //是否保留原有内容
        restrict: 'E', // E C A M
        controller: '', // or function(){}
        scope: false, //true or {}
        require: ['?ngModel'],//依赖项
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {

                },
                post: function postLink(scope, iElement, iAttrs, controller) {

                }
            }
        },
        link: function postLink(scope, iElement, iAttrs) {
        }
    }
});

 

---

针对指令的这些参数我们进行分布讲解，课程目录：

1. 第一节:目录

2. 第二节:优先级priority,模板template,模板页templateUrl

3. 第三节:替换replace，内容保留transclude,作用方式restrict

4. 第四节:作用域scope

5. 第五节:控制器controller

6. 第六节:依赖项require,ngModel组件

7. 第七节:compile函数

8. 第八节:link函数