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. php大力力 [055节] 大力力阅读文章集锦

    php大力力 [055节] 效率低啊,效率低 啥也不说了,先把网页挨个保存一下,关闭网页窗口 从 2015-09-11 10:58 到 2015-09-11 12:38 共用了100分钟,整理最近几天 ...

  2. ORACLE存储过程学习

    存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR REPLACE PROCEDURE ...

  3. js版扫雷（可直接运行试玩）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  5. 浅谈fls3的一个压缩问题

    昨天,用fis3压缩优化,在命令行运行命令的时候,出现了一个报错信息. not a PNG file. 查了很多资料,没找到解决方案,终于在github上提问,有正主回答: 是由于有些图片的后缀是通过 ...

  6. poj1741 （点分治）

    Problem Tree 题目大意 给一棵树,有边权.求树上距离小于等于K的点对有多少. 解题分析 点分治.对每一棵子树进行dfs,求出每棵子树的重心,继而转化为子问题. 对于经过根的路径i--j,令 ...

  7. C#通过WatiN操作页面中内嵌的Iframe

    通过WatiN.Core.Broswer.Frame()方法来获取iframe对象,之后的容器就是frame,然后进行操作. 下面的例子是登录QQ空间的: Frame frame = browser. ...

  8. UWP/Win10新特性系列—Drag&Drop 拖动打开文件

    在Win10 App开发中,微软新增了系统PC文件与UWP 之间的文件拖拽行为,它支持将系统磁盘上的文件以拖拽的形式拖入App中并处理,在前不久的微软build 2015开发者大会上微软展示的UWP版 ...

  9. Lua库之时间和日期操作

    Lua库之时间和日期操作 (2010-02-07 18:41:20) 转载▼ os.time() <== 返回当前系统的日历时间os.date() <== 返回本地化的时间字符串,这里是& ...

  10. Scrollview嵌套Listview运行后最先显示出来的位置不在顶部而是中间问题

    问题: Scrollview里面嵌套了一个Listview ,通过设置一个方法设置了Listview的高度,现在的情况就是进到这个界面的时候看到的不是最上面 而是中间 解决办法: 设置ListView ...