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. Android下使用Properties文件保存程序设置

    原文:http://jerrysun.blog.51cto.com/745955/804789 废话不说,直接上代码.    读取.properties文件中的配置: String strValue ...

  2. iOS按钮设置图片在上文字在下

    UIButton同时设置Title和Image后,默认是图片在左文字在右,如下图1,很多情况下我们希望图片在上图片在下,如下图2,只需要简单的几行代码,即可实现. (1)因为需要处理多个按钮,所以将实 ...

  3. Ansible-Tower快速入门-1.概览【翻译】

    概览 Tower Ansible-Tower是作为Ansible的一个web接口界面,并采用REST API作为端点接入.通过使用开源的orchestration engine,无论是与你的团队共享操 ...

  4. 《看板与Scrum》读书笔记

    看板的朴素思想:在制品(work-in-progress, WIP)必须被限制 WIP上限和拉动式生产 1. Scrum与看板简述 Scrum:组织拆分,工作拆分,开发时间拆分,优化发布计划,过程优化 ...

  5. 用jQuery判断一个元素的各种状态

    用jQuery判断一个元素是否显示   用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(ele ...

  6. 详解div+css相对定位和绝对定位用法

    1.定位的专业解释: (1)语法 position:static|absolute|fixed|relative 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(ab ...

  7. 【转】使用Eclipse搭建Python开发环境

    因为要进行自动化测试,所以要搭建Python开发环境.这里将使用Eclipse+pyDev进行搭建,在此作为笔记记录下来. 需要的组件: 1.Eclipse SDK 3.7(这里将不再叙述Eclips ...

  8. html页面元素事件丢失

    前段时间做网站包括最近用mvc做oa都发现这个奇怪现象,就是页面加载完毕后页面元素事件(比如按钮点击.复选框change)一切正常,但是当执行查询或者其他操作后页面事件丢失.具体原因暂没有时间分析,现 ...

  9. google搜索技巧

    说明:‘’是为了突出,不属于搜索表达式的一部分 —————————————————————— 1.空格 空格代表和 例如 复旦 社会学 搜索结果网页同时包含这两个关键字. 2.‘-’ ’-‘代表排除某 ...

  10. 【转载】Python的包管理工具Pip

    接触了Ruby,发现它有个包管理工具RubyGem很好用,并且有很完备的文档系统http://rdoc.info 发现Python下也有同样的工具,包括easy_install和Pip.不过,我没有细 ...