Board logo

标题: Angular Directive 详解 [打印本页]

作者: look_w    时间: 2019-3-8 18:42     标题: 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的。




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0