文档章节

AngularJS —— 自定义指令

孟飞阳
 孟飞阳
发布于 2016/12/11 08:49
字数 561
阅读 6
收藏 0

如何自定义指令:

  Angular是基于模块的框架,因此上来肯定要创建一个自己的模块:

var myAppModule = angular.module("myApp",[]);

  然后在此模块基础上创建指令directive

myAppModule.directive("xingoo",function(){
                return{
                    restrict:'AECM',
                    template:'<div>hello my directive</div>',
                    replace:true
                }
            });

  其中,xingoo是我们自定义标签的名字,后面跟着它的方法函数。

  函数return了一个键值对组合,其中定义了标签的使用方法、属性等等内容。

  那么看看它都定义了哪些内容吧:

  1 restrict:定义了标签的使用方法,一共四种,分别是AECM

  2 template:定义标签的模板。里面是用于替换自定义标签的字符串

  3 replace:是否支持替换

  4 transclude:是否支持内嵌

  如何使用指令:

  上面提到了标签的四种使用方法,即AECM。

  A attribute属性:当做属性来使用

<div xingoo></div>

  E element元素:当做标签元素来使用

<xingoo></xingoo>

  C class类:当做CSS样式来使用

<div class="xingoo"></div>

  M comments注释:当做注释使用(这种方式在1.2版本下亲测不可用!)

<!-- directive:xingoo -->
<div></div>

  一般来说推荐,当做属性和元素来使用。

  当想要在现有的html标签上扩展属性时,采用属性的方式。

  当想要自定义标签时,采用标签的形式。

  想要使用那种方式,必须要在定义directive中的restrict里面声明对应的字母。

 

  指令的内嵌使用:

  因为标签内部可以嵌套其他的标签,因此想要在自定义标签中嵌套其他的元素标签,则需要:

  1 使用transclude属性,设置为true。

  2 并使用ng-transclude属性,定义内部嵌套的位置。

  代码如下:

myAppModule.directive("test",function(){
                return{
                    restrict:'AECM',
                    transclude:true,
                    template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
                }
            });

 

  全部代码

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        
        <xingoo></xingoo>
        <div xingoo></div>
        <div class="xingoo"></div>
        <!-- directive:xingoo -->
        <div></div>
        <hr>
        <xingoo>3333</xingoo>
        <hr>
        <test>4444</test>


        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.directive("xingoo",function(){
                return{
                    restrict:'AECM',
                    template:'<div>hello my directive</div>',
                    replace:true
                }
            });

            myAppModule.directive("test",function(){
                return{
                    restrict:'AECM',
                    transclude:true,
                    template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
                }
            });
        </script>
    </body>
</html>

  运行结果

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 207
博文 975
码字总数 544644
作品 5
朝阳
个人站长
私信 提问
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
Angular 2: @Directive() 指令创建无限滚动

在最近的文章中,我使用 angular 2中新的"ng-repeat"也就是"NgFor"结合通用组件创建(自己的)组件。在这篇文章里,我将继续展示,结合 Angular 2进一步开发的 Echoes Player项目。这次为了更加动...

oschina
2016/02/09
9.6K
4
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用Redis实现“秒杀”系统

导论 曾经被问过好多次怎样实现秒杀系统的问题。昨天又在CSDN架构师微信群被问到了。因此这里把我设想的实现秒杀系统的价格设计分享出来。供大家参考。 秒杀系统的架构设计 秒杀系统,是典型...

小刀爱编程
5分钟前
0
0
GO redis 相关操作

在gopath 目录下安装 go get github.com/garyburd/redigo/redis package mainimport ("fmt""github.com/garyburd/redigo/redis")//定义一个全局链接池变量var pool *redis.Pool//......

汤汤圆圆
42分钟前
9
0
java8性特性,常用的lambda表达式

1、抽取多个对象中的某个属性,用数组接收 List<Student> students = new ArrayList<>(); List<String> names =students.stream().map(Student::getName).collect(Collectors.toList()); 2、......

Boss-x
44分钟前
12
0
flutter 子组件与父组件

无论是子组件还是父组件,任何时候initState()只执行一次,如果需要判断 就在build里面进行,不然无效的。

大灰狼wow
46分钟前
4
0
Rancher Labs引入全球首个多集群、多租户的Prometheus支持!

近日,Rancher Labs宣布加强对Prometheus的支持,提高Kubernetes集群的可见度。Rancher也因此成为唯一一个在多集群、多租户环境中支持Prometheus的解决方案。 Prometheus正迅速成为监控云原生...

RancherLabs
48分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部