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 入门编程

    1.输入以及输出 当通过new Scanner(System.in)创建一个Scanner,控制台会一直等待输入,直到敲回车键结束,把所输入的内容传给Scanner,作为扫描对象.如果要获取输入的内容 ...

  2. BZOJ 2743 树状数组

    不能用分块. #include <bits/stdc++.h> using namespace std; ; struct Info{int l,r,Id;}Q[Maxn]; int a[ ...

  3. Android上传图片到服务器

    一.android需要导入异步请求的jar包 AsyncHttpClient  public static void reg(final Context cont,Bitmap photodata,S ...

  4. iOS8: Ignore manifest download, already have bundleID

    在企业分发的app下载过程中,iOS8发现挂在官网上的企业版的app点击了提示是否安装应用程序,但始终安装不上程序,的device console发现安装的时候出现 LoadExternalDownl ...

  5. Swift----方法 、 下标 、 继承 、 初始化 、 析构方法 、 可选链

    下标的使用 1.1 问题 下标可以定义在类.结构体和枚举中,可以认为是访问对象.集合或序列的快捷方式,不需要再调用实例的特定的赋值和访问方法. 本案例定义一个Matrix结构体,用于呈现一个Doubl ...

  6. Hql 中 dao 层 以及daoimpl 层的代码，让mvc 模式更直观简洁

    1.BaseDao接口: //使用BaseDao<T> 泛型 ,在service中注入的时候,只需要将T换为对应的bean即可 public interface BaseDao<T& ...

  7. anjularjs简介

    1 什么时候该用AngularJS AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅 ...

  8. 在 CentOS 7.x / Fedora 21 上面体验 PHP 7.0

    编译自:http://linoxide.com/linux-how-to/install-php-7-centos-7-fedora-21/作者: Aun Raza原创:LCTT https://li ...

  9. Linux IO漫谈

    本文为原创,转载请注明:http://www.cnblogs.com/gistao/ Background IO可能是我们接触最频繁的系统调用,比如printf到终端,send content到对端, ...

  10. HTML5 input placeholder 颜色修改示例

    Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...