首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

Angular Directive 详解

Angular Directive 详解

Angular Directive 学习
学习目的:为了更好的了解 ng directive 的使用方法。

    Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令,比如ng-app,ng-controller这些。可以发现个特点,AngularJS自带的指令都是由ng-打头的。

    那么,Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html、js封装在一起,形成一个可复用的独立个体,具体特定的功能。下面我们来详细解读一下Directive的一般性用法。

AnguarJS directive的常用定义格式以及参数说明
看下面的代码:

    var myDirective = angular.module('directives', []);
     
    myDirective.directive('directiveName', function($inject) {
        return {
            template: '<div></div>',
            replace: false,
            transclude: true,
            restrict: 'E',
            scope: {},
            controller: function($scope, $element) {
     
            },
            complie: function(tElement, tAttrs, transclude) {
                return {
                    pre: function preLink(scope, iElement, iAttrs, controller) {
     
                    },
                    post: function postLink(scope, iElement, iAttrs, controller) {
     
                    }
                };
            },
            link: function(scope, iElement, iAttrs) {
     
            }
        };
    });
    复制代码

    这里直接return了一个object,对象中包括比较多的属性,这些属性都是对自定义directive的定义。详细的含义,下面会继续说明。
    return对象参数说明

    return {
        name: '',
        priority: 0,
        terminal: true,
        scope: {},
        controller: fn,
        require: fn,
        restrict: '',
        template: '',
        templateUrl: '',
        replace: '',
        transclude: true,
        compile: fn,
        link: fn
    }
    复制代码

如上所示,return的对象中会有很多的属性,这行属性都是用来定义directive的。
返回列表