Angular directive 实例详解

.directive的全部设置

angular.module('myApp', [])
.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(...) {... }
        }
    };
});
属性类型属性值是否可选默认参数备注
restrictstring可选参数restrict: ‘EA’指明指令在DOM中以什么形式被声明E:”元素”,A:“属性,默认值”,C:“类名”,M:注释“”
priority数字可选参数默认值:0指令的优先级,若在单个DOM元素上有多个指令,则优先级高的先执行
terminal布尔型可选参数若设置为true,则优先级低于此指令的其他指令则无效,不会被调用优先级相同任然会执行。
template字符串或者函数可选参数
replace布尔型内容默认值为false可以用模板内容替换自定义的元素标签,默认将元素插入到指令标签内部
templateUrl字符串或者函数可选参数可以使一个代表html文件路径的字符串,也可以是一个函数(tElement,tAttrs)其中t代表template,大致意思与template一样,会存在 一个跨域问题
scope布尔值或者对象可选参数默认值为false表示继承父级作用域如果值为true,表示继承父作用域,并创建自己的作用域(子作用域);如果为对象,{},则表示创建一个全新的隔离作用域。;@: 本地作用域属性 ,使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以 使用外部作用域的变量=: 双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。 就像普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。
& 与父级的方法绑定transclude布尔值或者字符element默认值为false这个配置选项可以让我们提取包含在指令那个元素里面的内容,再将它放置在指令模板的特定位置。当我们开启transclude之后,我们就可以使用ng-transclude来指明应该在什么地方放置transclude的内容
controller一个字符串或者函数内容若为字符串,则将字符串当做控制器的名字,来查找注册在应用中的控制器的构造函数。也可以直接在指令内部定义为匿名函数,同样可以注入任何服务
controllerAs内容内容们就可以不用将属性和方法挂载到$scope上,而是this上。
require字符串或者数组内容字符串代表另一个指令的名字,它将作为link函数的第四个参数
内容内容内容内容
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值