AngularJS提供了一系列的内置指令，如ng开头的指令，同时AngularJS也允许用户自定义指令。

目录：

　　1.自定义指令

　　2.使用自定义指令

　　3.自定义指令的内嵌使用

自定义指令

AngularJS中使用directive()方法来自定义指令，directive() 方法可以接受两个参数：

　　name(字符)：指令的名字，用来在视图中引用特定的指令

　　factory_function(函数)：这个函数返回一个对象，其中定义了指令的全部行为

例如：创建一个test指令：

var app = angular.module('myApp',[]);

    app.directive('hello',function(){

        return {

            restrict:'AECM',

            template:'<div>hello world</div>',

            replace:true

        };

    });

说明：

在directive方法的第二个函数参数中，返回了一个对象，字段的意义如下：

restrice：定义了标签的使用方法，一共四种，分别是AECM

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

repalce：是否替换

另外还有transclude:标识是否嵌套

使用自定义指令

指令在html中的使用有4中方法，分别对应restrice的标签的4个使用方法AECM

A：属性

<div hello></div>--------><div>hello world</div>

E：元素

<hello></hello>--------><div hello="">hello world</div>

C：样式（class的值）

<div class="hello"></div>------><div class="hello">hello world</div>

M：注释

<!-- directive:hello ----------->各个版本不一样

自定义指令的内嵌使用

app.directive('test',function(){

    return {

        restrict:'AECM',

        template:'<div>hello <div ng-transclude></div> world</div>',

        transclude:true

    };

});

说明：自定义指令的内嵌使用需要将transclude字段赋值为true，template中使用ng-transclude来确定内嵌的位置。

实例代码如下：

<!DOCTYPE>

<html ng-app="myApp">

<head>

     <meta charset="utf-8" />

     <script src="https://code.angularjs.org/1.3.1/angular.min.js"> </script>

</head>

<body>

    <div></div>

    <hello></hello>

    <div></div>

    <div hello></div>

    <div></div>

    <div class="hello"></div>

    <div></div>

    <!-- directive:hello -->

    <div></div>

    <hello></hello>

    <div></div>

    <test></test>

    <script type="text/javascript">

        var app = angular.module('myApp',[]);

        app.directive('hello',function(){

            return {

                restrict:'AECM',

                template:'<div>hello world</div>',

                replace:true

            };

        });

        app.directive('test',function(){

            return {

                restrict:'AECM',

                template:'<div>hello <div ng-transclude></div> world</div>',

                transclude:true

            };

        });

    </script>

</body>

</html>

AngularJS---自定义指令的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  5. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  6. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  7. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

  8. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  9. AngularJS自定义指令(Directives)在IE8下的一个坑

    在项目中,由于要兼容到IE8,我使用1.2.8版本的angularJS.这个版本是支持自定义指令的.我打算使用自定义指令将顶部的header从其他页面分离.也就是实现在需要header的页面只用在&l ...

  10. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

随机推荐

  1. Java 查漏补缺

    摘自<老马说编程> 计算机程序的思维逻辑 (4) - 整数的二进制表示与位运算 Java中不支持直接写二进制常量,比如,想写二进制形式的11001,Java中不能直接写,可以在前面补0,补 ...

  2. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  3. python 新旧类的问题

    老式类就是经典类,不是继承自object类.在多继承时采用深度优先遍历父类.新式类就是基类继承自object类 class xxx(object).多继承时采用一种新的C3 算法来遍历父类.实例如下: ...

  4. C#数据类型分类

    C#是强类型语言,所以在定义每一个变量.常量和对象的时候都必须声明该类型. C#数据类型分为值类型.引用类型和指针类型(指针类型很少用): C#数据类型还可以分为内置类型.匿名类型和自定义类型.

  5. eclipse点不出方法

    window→preferences→java→editor→Content Assist→Advanced

  6. CentOS 6 minimal 网络配置

    安装CentOS6 minimal 之后ifconfig 只有lo本地 的127.0.0.1 没有局域网ip. 这边我用的是vmware  nat  DHCP 提供网络服务.过程就不赘述了. 解决笔记 ...

  7. php 获取静态方法调用的类名

    方法一: class foo { static public function test() { var_dump(get_called_class()); } } class bar extends ...

  8. 《JavaScript DOM编程艺术》读后总结

    这是我读的第一本关于JS的书,刚开始我为了选择合适的学习JS的书,看了网上许多人的意见,基本上都是推荐先读这本书.书的内容挺简单的,确实很适合初学者看,阅读的过程中不会产生什么障碍.内容虽然简单,但我 ...

  9. Your stream was neither an OLE2 stream, nor an OOXML stream.问题的解决

    先说说问题的来源 ,使用NPOI读取Except,先通过流来读取,如果符合要求,就将流保存为文件. 众所周知,流只能读一次,所以在流读取之前需要将流拷贝一份,保存文件的时候使用. protected ...

  10. Hbase的flush机制

    Hbase Flush机制最小Flush单元为HRegion,尽量减少CF数量以减少HStrore数量从而减少MemStore的数量,最终减少每次Flush的开销.1.Region级别触发条件:   ...