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

先来看一个简单的指令：

<!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. P1059 明明的随机数【去重排序】

    题目描述 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤100),对于其中重复的数字,只保留一个,把其余相同的数去掉,不同的数对应 ...

  2. zoj3988

    zoj3988 题意 如果一个集合 \(\{i,j\}\) 满足 \(i\neq j\) 且 \(a[i]+a[j]\) 是素数,则称之为素数集合. 给出一些数字,这些数字可以组成多种素数集合,从这些 ...

  3. 洛谷——P1407 工资

    P1407 工资 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司里,有超过一半的雇员,他们的工资完全相同! 公布了这项调查结果后,众多老板对于这一现象很感兴趣,他们 ...

  4. Linux命令之quota

    quota [-guqvswim] [-l | [-Q | -A] ] [-F quotaformat] quota [-qvswim] [-l | [-Q | -A]] [-F quotaforma ...

  5. JVM的参数配置

    JVM管理的内存叫堆.在32Bit操作系统上有1.5G-2G的限制,而64Bit的就没有. JVM初始分配的内存由-Xms指定,默认是物理内存的1/64但小于1G. JVM最大分配的内存由-Xmx指定 ...

  6. Plus One Linked List -- LeetCode

    Given a non-negative number represented as a singly linked list of digits, plus one to the number. T ...

  7. [BZOJ 2342] 双倍回文

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=2342 Algorithm: 解决回文串问题,一般从对称轴下手. 肯定先跑一边Manach ...

  8. Java杂谈2——引用与跟搜索算法

    Java中的引用 Java“引用”的概念源于C++,原本的定义相当有限:一个引用(Reference)代表的内存通常用于指向另一块内存区域的起始地址.通过引用类型保存的起始地址,可以找到这个引用所指向 ...

  9. 【mybatis】mybatis执行一个update方法，返回值为1，但是数据库中数据并未更新，粘贴sql语句直接在数据库执行，等待好久报错：Lock wait timeout exceeded; try restarting transaction

    今天使用mybatis和jpa的过程中,发现这样一个问题: mybatis执行一个update方法,返回值为1,但是数据库中数据并未更新,粘贴sql语句直接在数据库执行,等待好久报错:Lock wai ...

  10. 【InteillJ IDEA】Git的安装+同步项目到GitHub上

    需要的工具: 1.InteillJ IDEA 2.Git 3.GitHub帐号 步骤: 1.下载Git 下载地址:https://git-scm.com/downloads 安装完成后 勾选Launc ...