博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
17.自定义指令
阅读量:6909 次
发布时间:2019-06-27

本文共 1062 字,大约阅读时间需要 3 分钟。

转自:https://www.cnblogs.com/best/tag/Angular/

内置的指令就算再丰富也是有限的,对于特殊的需要可以选择自定义指令,自定义指令可以封装常用操作也便于分享与交流,自定义指令的语法格式如下:

module.directive('指令名称',function(){

    return {
      template:插入指令元素的模板
      restrict:允许指令应用的范围
      replace:告诉编译器用指令模板取代定义该指令的元素
      transclude:是否可以访问内部作用域以外的作用域
      scope:指定内部作用域
      link:链接函数
      controller:定义控制器来管理指令作用域和视图
      require:指定所需要的其它指令
   };
});

restrict:限制指令行为,允许指令应用的范围,取值,可以组合,如AE。

@:使用@(@attribute)来进行单向文本(字符串)绑定

= :使用=(=attribute)进行双向绑定变量
& :使用&来调用父作用域中的函数

3.5.1、第一个自定义指令

示例代码:

1  2 
3 4 5 6
7 指令 8 9 10 11
12
13 14
15
16
17 18
19
20 21 39 40 41

运行结果:

因为使用了replace属性,所以div标签被替换了,另外restrict指定为AE则标签可以作为元素与属性使用。

3.5.2、自定义时钟

上个自定义指定很简单,我将上一个指令修改为可以动态变化的时间及可以给时钟指定参数与事件。

示例代码:

指令

运行结果:

转载于:https://www.cnblogs.com/sharpest/p/8126848.html

你可能感兴趣的文章
Unix Study之--AIX安装和配置SSH
查看>>
C++ priority_queue用法(大顶堆,小顶堆)
查看>>
带返回值的python多级菜单
查看>>
Linux中~/.是什么意思
查看>>
MySql-Binlog协议详解-流程篇
查看>>
Effective Java 学习笔记(第57条:只针对异常的情况才使用异常)
查看>>
Simple-Spring-Memcached深入研究一
查看>>
大话JS神器之Promise
查看>>
网页适配之强制网页适配手机屏幕
查看>>
ThinkPHP2.2 任意代码执行漏洞 利用
查看>>
期年之痒
查看>>
cpanm perl模块自动安装
查看>>
深入讲解BGP协议synchronous原理
查看>>
简要总结最近遇到的5个问题
查看>>
中国象棋程序的设计与实现(七)--心得体会和开发日志
查看>>
浅显理解 Python 闭包
查看>>
学习Oracle分析函数(Analytic Functions)
查看>>
openstack学习笔记二 网络设置基础
查看>>
RabbitMQ基础
查看>>
有了安全边界,人工智能才能有序发展
查看>>