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

先来看一个简单的指令：

<!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. CocoaPods 2017最新、最快安装和使用说明

    2017 - 11 - 29 更新 记录: 今天把系统升级到了最新的10.13 也就是high sierra,导入snapKit的时候Cocoapods的时候出现了下面的问题: -bash: /usr ...

  2. ACM-ICPC 2018 沈阳赛区网络预赛 D. Made In Heaven（第k短路模板）

    求第k短路模板 先逆向求每个点到终点的距离,再用dij算法,不会超时(虽然还没搞明白为啥... #include<iostream> #include<cstdio> #inc ...

  3. [HNOI2018]道路(DP)

    题目描述 W 国的交通呈一棵树的形状.W 国一共有n−1n - 1n−1 个城市和nnn 个乡村,其中城市从111 到n−1n - 1n−1 编号,乡村从111 到nnn 编号,且111 号城市是首都 ...

  4. POJ 2763 Housewife Wind（树链剖分+树状数组）

    [题目链接] http://poj.org/problem?id=2763 [题目大意] 在一棵树上,给出一些边的边长,有修改边的边长的操作, 询问每次从当前点到目标点的最短距离 [题解] 树链剖分之 ...

  5. 关于SQL优化方面的一些总结

    在sql查询中为了提高查询效率,我们常常会采取一些措施对查询语句进行sql优化,下面总结的一些方法,有需要的可以参考参考. 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ord ...

  6. 输入参数之POJO包装类

    1,包装类:需要实现序列化 package com.songyan.pojo; import java.io.Serializable; public class QueryVo implements ...

  7. scope的范围

    (一)scope=“singleton” 知识点:无论获取多少个bean,得到的总是一样的地址,singleton范围下只会创建一个bean实例 1.Bean4.java package com.in ...

  8. C#测试程序运行时间

    一.用C#自带的StopWatch函数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 using System; usi ...

  9. nginx+ssl+Portus+registry docker仓库

    还存在的问题,如果通过nginx 转发推过去的镜像,在web页面显示比较慢,需要等定时任务发现了才能及时显示出来,如果通过b.p.xxx.cn:5000加端口push 的镜像就比较快显示出来.只影响到 ...

  10. HTMLTestRunner美化

    https://www.cnblogs.com/findyou/p/6925733.html 参考这个,美化的不错,进入了汉化,及加入了一些样式,