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

先来看一个简单的指令：

<!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. MySQL密码不能登陆问题

        由于种种原因,在进行开发的时候我一直是基于Windows平台,并且以前初学的时候常常重装不同版本的 MySQL数据库.因此长时间不使用后就产生了一些冲突的问题.     简单描述下,今天用以前 ...

  2. 洛谷——P2371 EXCEEDED WARNING C（50）

    P2371 EXCEEDED WARNING C 题目背景 第三道溢出警告... 机(wei)智(suo)的TMXi又搬题来坑大家了... 注意时空限制[坏笑] 题目描述 [li]1949年,阿三的数 ...

  3. JVM的内存布局

    JVM的内存布局包括,其中: Java虚拟机在执行Java程序的过程中会把它所管理的内存(线程相关?)划分为若干个不同的数据区域.有些区域随着虚拟机进程的启动而存在,有些区域则是依赖用户线程的启动和结 ...

  4. [Atcoder Grand Contest 001] Tutorial

    Link: AGC001 传送门 A: …… #include <bits/stdc++.h> using namespace std; ; ]; int main() { scanf(& ...

  5. TZOJ 删除前导多余的*号

    描述 规定输入的字符串中只包含字母和*号,编写程序使字符串中前导的*号不得多于n个:若多于n个,则删除多余的*号:若少于或等于n个,则什么也不做,字符串中间和尾部的*号不删除. 输入 输入数据包括一串 ...

  6. maven将jar文件加入到maven库

    mvn install:install-file-DgroupId=包名-DartifactId=项目名-Dversion=版本号-Dpackaging=jar-Dfile=jar文件所在路径 1,本 ...

  7. React Native学习之自定义Navigator

    Navigator还是最常用的组件, 所以自己封装了一个, 使用起来也比较简单, 如下: 首先导入组件 var MLNavigator = require('../Lib/MLNavigator'); ...

  8. FindFirstVolume系列函数遍历驱动器，获取驱动器信息

    什么是“卷”?卷,又称为“逻辑驱动器”,是 NTFS, FAT32 等文件系统组织结构的最高层.卷是存储设备(如硬盘)上由文件系统管理的一块区域,是在逻辑上相互隔离的存储单元.一个磁盘分区至少包含一个 ...

  9. 微信开发之消息接收与回复--weixin-java-tools

    一.前言 在上一篇文章<微信开发之如何使用开发工具--weixin-java-tools>中我给各位介绍了weixin-java-tools,并且介绍了如何使用weixin-java-to ...

  10. mongodb_profier

    http://docs.mongodb.org/manual/reference/database-profiler/ 一.获取.设置profile(profile用collection存储数据) d ...