专栏首页xingoo, 一个梦想做发明家的程序员【AngularJS】—— 8 自定义指令

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。 前面提到AngularJS的四大特性:   1 MVC   2 模块化   3 指令   4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令   2 自定义指令的使用   3 自定义指令的内嵌使用

  如何自定义指令:

  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>

  运行结果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【SVN多用户开发】代码冲突&解决办法

    SVN是一款集中式的代码存储工具,可以帮助多个用户协同开发同一应用程序。 但是SVN不能完全代替人工操作,有时也需要程序员自己进行沟通确认有效的代码。 下...

    用户1154259
  • Zookeeper学习笔记——2 Shell和Java API的使用

    ZooKeeper的使用一般都接触不到,因为平时工作甚少直接使用ZK。但是通过手动操作一下ZK,还是能对其中的门道了解各一二。 shell 常用命令 he...

    用户1154259
  • MFC中注释含义

    下面是 CStdioFile 类的部分列表,其中使用了 MFC 在其类中按类成员的用法划分它们时所采用的大多数标准注释: class CStdioFile :...

    用户1154259
  • 红帽助力HPC--我在Dell&RedHat HPC研讨会上的分享

    前言:今日,笔者受邀参加“Dell&RedHat HPC研讨会”。会上,分享了红帽在HPC领域的解决方案。由于很多朋友关心这个话题,因此将演讲的内容分享出来,供...

    魏新宇
  • 不被未来折叠掉:AI时代下的思考

    未来人工智会取代多少人类工作?各个专家的估计有一定差别,但共识是: 在未来的10—20 年,随着机器学习快速发展,人工智能会在各个领域大面积使用,目前的重复性劳...

    企鹅号小编
  • webpack+vue项目实战(三,配置功能操作页和组件的按需加载)

    上篇文章(webpack+vue项目实战(二,开发管理系统主页面)),实现了,侧边栏的一个操作,点击侧边栏的一些操作,最重要的就是路由的切换。看了上一篇的伙伴也...

    守候i
  • 《经济学人》:中国人工智能可赶超美国

    《经济学人》发文表示,中国可能会在人工智能竞争中赶上、甚至超越美国。 2017年年初,关注全球人工智能发展的人士可能会注意到两件事情。第一件事情是,微软高管陆奇...

    人工智能快报
  • 《 AI Now Report 2018 》:避免 AI 沦为恶魔,问责制度迫在眉睫

    AI 科技评论按:2018 年围绕着人工智能的一连串技术丑闻的核心只有一个:问责制。当 AI 系统对我们的身体造成伤害时,谁应该为此负起责任?我们应该如何定义这...

    AI科技评论
  • 2018年上海人工智能领域投资机构50强

    在人工智能融合应用场景上,《意见》强调在推动制造业转型升级、驱动金融商贸创新、优化城市综合运行、促进公共服务提质增效、提升交通航运效率以及推进医疗健康精准普惠等...

    辉哥
  • 马云:人工智能只是程序和数据,不足为惧

    如今,人工智能已经不再是一个陌生的词语,新一代人工智能技术也不再是单一的学科门类。人工智能涵盖了基础设施平台、大数据获取、机器学习算法、模式识别、人机交互等一系...

    机器人网

扫码关注云+社区

领取腾讯云代金券