对指令的第一印象：它是一个自定义标签！

先来看一个简单的指令：

<!doctype html>

<html ng-app="myApp">

    <head>

    <title>    自定义指令</title>

      <script type="text/javascript" src="http://localhost:10100/angular.min.js" charset="utf-8"></script>

    </head>

    <body>

        <my-directive></my-directive>

        <script type="text/javascript" src="myDirective.js"></script>

    </body>

</html>
var app=angular.module("myApp",[]);

app.directive("myDirective",directiveFunc);

function directiveFunc()

{

    return {

        restrict:"E",

        template:"<a href='http://baidu.com'>百度一下</a>"

    };

};

这里面需要注意的是：

1.指令名应该是驼峰命名风格的，如"myDirective"，对应的HTML标签是"my-directive"

2、函数应该返回一个对象

运行结果如下：

这里可以看到，template的内容被包含在了自定义指令内部

指令中如果加上replace属性（replace:true），则自定义指令标签会直接被template内容替换，如下：

function directiveFunc()

{

    return {

        restrict:"E",

        replace:true,

        template:"<a href='http://baidu.com'>百度一下</a>"

    };

};

--------------------------------------------------------------------------------------------------------------------------分割线1--------------------------------------------------------------------------------------------------------------------------

之前说指令的第一印象是自定义标签，往往第一印象并不是准确的，实际上声明指令并不需要创建一个新的自定义元素

声明指令本质上是在HTML中通过元素、属性、类或注释来添加功能

以下申明指令的格式都是合法的：

<my-directive></my-directive>        //元素

<div my-directive></div>            //属性

<div class="my-directive"></div>    //类

<!--directive:my-directive-->        //注释

但是，无论有多少种方式可以声明指令，我们坚持使用属性方式，因为它有比较好的跨浏览器兼容性

指令定义中的restrict 属性就是用来匹配指令格式的，它们分别是元素（E）、属性（A）、类（C）或注释（M）

我们可以指定一个或多个格式

我们都知道，指令作为一个属性，可以设置一个表达式，例如

<h1 ng-init="greeting='HelloWorld'">

The greeting is: {{ greeting }}

</h1>

ng-init是内置指令，其实，自定义指令directive也是可以的，但是

值得注意的是：所有指令（内置或者自定义）都会创建新的子作用域 ，使得表达式中的对象都有其明确的作用域区间

--------------------------------------------------------------------------------------------------------------------------分割线2--------------------------------------------------------------------------------------------------------------------------

指令能够作为自定义标签使用，当然也能够接收参数变量，如下：

<!doctype html>

<html ng-app="myApp">

    <head>

    <title>    自定义指令</title>

      <script type="text/javascript" src="http://localhost:10100/angular.min.js" charset="utf-8"></script>

    </head>

    <body>

        <div ng-controller="dirCtrl" my-directive my-url={{myUrl}} my-link={{myLink}}>

        </div>

        <script type="text/javascript" src="myDirective.js"></script>

        <script>

            <!-- 隐式控制器 -->

            function dirCtrl($scope){

                $scope.myUrl="http://baidu.com";

                $scope.myLink="再百度一下试试";

            };

        </script>

    </body>

</html>
var app=angular.module("myApp",[]);

app.directive("myDirective",directiveFunc);

function directiveFunc()

{

    return {

        restrict:"A",

            replace:true,

            template:'<a href="{{ myUrl }}">{{ myLink }}</a>',

            scope: {

                //这个"@"绑定策略告诉AngularJS将DOM中some-property属性的值复制给新作用域对象中的someProperty属性

                myUrl: '@',

                myLink: '@'

                //默认情况下someProperty在DOM中的映射是some-property属性

                //如果我们想显式指定绑定的属性名，可以用如下方式

                //myUrl: '@mySecondUrl'

            }

    };

};

这样做，貌似所有的自定义属性，包括“my-directive”本身都还显式存在

指令的生命周期开始于$compile方法并结束于link方法

AngularJs学习笔记（4）——自定义指令的更多相关文章

  1. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  2. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  3. AngularJs学习笔记5——自定义服务

    前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...

  4. 【AngularJS学习笔记】01 指令、服务和过滤器

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...

  5. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  10. AngularJs学习笔记--Managing Service Dependencies

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...

随机推荐

  1. </2017><2018>

    >>> Blog 随笔原始文档及源代码 -> github: https://github.com/StackLike/Python_Note >>> 统计信 ...

  2. ActiveMQ学习总结

    一.消息中间件的产生的背景 1.在网络通讯中,Http请求默认采用同步请求方式,基于请求与响应模式 2.在客户端与服务器进行通讯时,客户端调用服务端接口后,必须等待服务端完成处理后返回结果给客户端才能 ...

  3. 使用selenium模拟知网登录

    之前都是用phantomjs和selenium模拟浏览器动作的,后来phantomjs不再更新,就转用chrome了 本次模拟登录的网站是中国知网http://login.cnki.net/login ...

  4. 单调队列练习题(oj p1157 p1158 p1159)

    p1157是很气人的...自从评测机挂了后,速度就特别慢,cin已经过不了了,然而我不知道,就各种**的提交 惨兮兮惨兮兮,这还是开了小号(通过率堪忧.jpg...)... 思路就是单调队列维护,用队 ...

  5. RabbitMQ (七) 订阅者模式之主题模式 ( topic )

    主题模式和路由模式很像 路由模式是精确匹配 主题模式是模糊匹配 依然先通过管理后台添加一个交换机. 生产者 public class Producer { private const string E ...

  6. 【spfa】bzoj1295 [SCOI2009]最长距离

    题意:给你一个n*m的点阵.有些点是障碍,求一个欧几里得距离最大的点对(A,B),使得在移走的障碍≤T的情况下,可以从A走到B. 建图,跑n*m次spfa,求出从 每个点 出发到 其他所有点 的 经过 ...

  7. Exercise01_11

    public class Population{ public static void main(String[] args){ int sum,s; s=365*5*24*60*60; sum=31 ...

  8. cocos2dx 3.13 etc1 ClippingNode Bug 修正

    void TrianglesCommand::useMaterial() const { if(_stencl){ /*******[solyess] etc1 mask的支持************ ...

  9. 使用openssl生成密钥、加密和签名

    openssl genrsa -out rsakey.pem 1024  //生成1024bit的RSA密钥,并保存到rsakey.pem,此处未对密钥进行加密 openssl genrsa -aes ...

  10. nginx做反向代理时获取真实IP

    原文:http://blog.csdn.net/aquester/article/details/48657395 1. 编译 对于client -> nginx reverse proxy - ...