AngularJS自定义指令|菜鸟教程(1)

    angular.module('app', [])
    .directive('myDirective', function() {
        return {
        restrict: String,          
        priority: Number,
        terminal: Boolean,
        template: String or Template Function:
        function(tElement, tAttrs) {...},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or
        function(scope, element, attrs, transclude, otherInjectables) { ... },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) { ... },
        compile: // 返回一个对象或连接函数,如下所示:
        function(tElement, tAttrs, transclude) {
            return {
                pre: function(scope, iElement, iAttrs, controller) { ... },
                post: function(scope, iElement, iAttrs, controller) { ... }
               }
            return function postLink(...) { ... }
            }
        };
     });
     
     

下面我们来从上到下解释一下。
本系列所有的 实例基于 angular-seed


  • restrict String
    E(元素)<my-directive></my-directive>
    A(属性,默认值)<div my-directive="expression"></div>
    C(类名)<div class="my-directive:expression;"></div>
    M(注释)<--directive:my-directive expression-->

  • priority: Number,指令执行优先级

  • template: String,指令链接DOM模板,例如<h1>{{head}}</h1>

  • templateUrl:String,DOM模板路径

  • replace: Boolean,指令链接模板是否替换原有元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容