AngularJs学习笔记（4）——自定义指令
对指令的第一印象：它是一个自定义标签！
先来看一个简单的指令：
<!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）——自定义指令的更多相关文章
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- AngularJs学习笔记5——自定义服务
前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...
- 【AngularJS学习笔记】01 指令、服务和过滤器
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
随机推荐
- Wannafly挑战赛17 A 走格子【矩阵行走/模拟】
[链接]:A [分析]:可以设置方向数组和标记数组.当不合法(越界/访问过)就转向,转向可以用now=(now+1)%4 [代码]: #include <bits/stdc++.h> #d ...
- 路由网关zuul(七）
一.定义 Zuul包含了请求的路由和过滤的2个主要的功能: 其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础而过滤器功能则负责对请求处理过程进行干预,是实现请求校验,服 ...
- ＰＯＪ ３２８１ Dining（网络流）
Dining Time Limit: 2000MS Memo ...
- Hibernate所有缓存机制详解
hibernate提供的一级缓存 hibernate是一个线程对应一个session,一个线程可以看成一个用户.也就是说session级缓存(一级缓存)只能给一个线程用,别的线程用不了,一级缓存就是和 ...
- 【树状数组】Codeforces Round #755 D. PolandBall and Polygon
http://codeforces.com/problemset/problem/755/D 每次新画一条对角线的时候,考虑其跨越了几条原有的对角线. 可以用树状数组区间修改点查询来维护多边形的顶点. ...
- 【递推】【卡特兰数】CODEVS 3134 Circle
新GET了一种卡特兰数的应用…… 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多少种连线的方法. 不会证 ...
- Mybatis全部标签
一.定义SQL语句 (1)select 标签的使用 属性介绍: id :唯一的标识符. parameterType:传给此语句的参数的全路径名或别名 例:com.test.poso.User或user ...
- noip2017集训测试赛（三） Problem B: mex [补档]
Description 给你一个无限长的数组,初始的时候都为0,有3种操作: 操作1是把给定区间[l,r][l,r] 设为1, 操作2是把给定区间[l,r][l,r] 设为0, 操作3把给定区间[l, ...
- Java高级架构师（一）第25节：实现前端的业务登录等功能
package com.sishuok.architecture1; import javax.servlet.http.Cookie; import javax.servlet.http.HttpS ...
- Scala实战高手****第13课：Scala模式匹配实战和Spark源码鉴赏
package com.dt.spark.scala.bascis class Dataframework case class Computerframework (name:String,popu ...