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

先来看一个简单的指令：

<!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. linux中Firefox浏览器 手动安装 flash

    打开firefox浏览器,当你打开有关音频或者视频的网站时候,会提示你安装 flash,可是,官网提示,需要手动安装. 1.先从提示的官网上下载好文件 “install_flash_player_11 ...

  2. HTTP状态代码集

    所有 HTTP 状态代码及其定义.   代码  指示     2xx  成功     200  正常:请求已完成.     201  正常:紧接 POST 命令.     202  正常:已接受用于处 ...

  3. Longest Absolute File Path -- LeetCode

    Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...

  4. [BZOJ 1177] Oil

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1177 Solution: 相当于将大矩形分为3块,取每块中最大的正方形 对于此类分成几块 ...

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

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

  6. 【莫比乌斯反演+分块】BZOJ1101-[POI2007]Zap

    [题目大意] 对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. [思路] 前面的思路同HDU1695 不过不同的是这道题中(a,b)和(b ...

  7. Arena | 用Excel设计的RPG游戏

    文章目录 写在前面 支持的软件 下载地址 游戏界面截图 写在前面 你在用Excel做报表的时候,世界的某个角落,有位大神早就用它做出了一款RPG游戏--Arena.xlsm 加拿大大学生Cary Wa ...

  8. ajaxfileupload-上传文件示例

    1.引用文件 ajaxfileupload.js @{ ViewBag.Title = "数据导入"; Layout = "~/Views/Shared/_IndexLa ...

  9. React Conf 2017 干货总结 1: React + ES next = ♥

    React Conf 2017在加利福尼亚州的圣克拉拉万豪酒店圆满落幕,这已经是Facebook举办的第三届React官方大会了.虽然不能参会,但是作为前端开发者,我们当然不能错过这个绝佳的学习契机. ...

  10. 【java】子类可以通过调用父类的public方法调用父类的private方法，为什么？

    代码1: 打印结果: 代码2: 运行结果: 问题: 代码1中super是父类自己调用自己的add()方法,并在add()方法中调用了私有的del()方法,那为什么打印出来的this是子类? 代码2中t ...