AngularJs自定义指令详解（2） - template
一些用于定义行为的指令，可能不需要使用template参数。
当指定template参数时，其值可以是一个字符串，表示一段HTML文本，也可以是一个函数，这函数接受两个参数：tElement和tAttrs。
前者用的较为普遍，而且也好理解。后者暂不理会。
下面是一个例子，在模板中使用rootScope里定义的变量：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">
angular.module('app',[])
.run(function($rootScope){
$rootScope.greeting = 'World';
})
.directive('myDirective',function(){
return{
template:'Hello {{greeting}}!' };
});
</script>
</head>
<body ng-app="app">
<div my-directive></div>
</body>
</html>
审查元素看看：
果然，在解析指令里的greeting变量时，AngularJs会跑到$rootScope里找。
那么，加个控制器试试看：
angular.module('app',[])
.run(function($rootScope){
$rootScope.greeting = 'World';
})
.controller('myController',function($scope){
$scope.greeting = 'AngularJs';
})
.directive('myDirective',function(){
return{
template:'Hello {{greeting}}!'
};
});
别忘了：
<div ng-controller="myController" my-directive></div>
在浏览器中查看，输出的是：
Hello AngularJs!
可见指令使用的是控制器创建的子作用域$scope
下一篇文章会继续深入指令的作用域。
AngularJs自定义指令详解（2） - template的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
- AngularJs自定义指令详解（9） - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解（8） - priority
priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...
- AngularJs自定义指令详解（3） - scope
我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...
- AngularJs自定义指令详解（10） - 执行次序
代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解（7） - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
- AngularJs自定义指令详解（4） - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
随机推荐
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- opencv - haar人脸特征的训练
step 1: 把正样品,负样品,opencv_createsamples,opencv_haartraining放到一个文件夹下面,利于后面的运行.step 2: 生成正负样品的描述文件 正样品描述 ...
- JavaScript中Math--random()/floor()/round()/ceil()
Math.random():返回0-1之间的任意数,不包括0和1: Math.floor(num):返回小于等于num的整数,相当于四舍五入的四舍,不五入:例子:Math.floor(1.0);Mat ...
- git 新建项目
备份. 1.cd dirctory 2.git init 3.git.oschina.net 上新建项目. 4.git remote add origin XXX.git 5.git push ...
- 2. xargs 命令
1.简介 xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处理.通常情况下,xargs从管道或者stdin中读取数据,但是 ...
- Android插件化开发
客户端开发给人的印象往往是小巧,快速奔跑.但随着产品的发展,目前产生了大量的门户型客户端.功能模块持续集成,开发人员迅速增长.不同的开发小组开发不同的功能模块,甚至还有其他客户端集成进入.能做到功能模 ...
- 8，SFDC 管理员篇 - 数据模型 - 公式和验证 2
1, Checkbox 只接受真值或者假值 And(arg1, arg2....)至少两个参数,只有参数都为真时候,才返回真,只要有一个为假,就都为假 例如:AND(DoNotCall, HasOpt ...
- C++学习基础九——继承
1.不同于Java中通过extends实现继承,C++是通过:实现的. 2.C++中同样包含public,private,protected三个关键字: public关键字表示在任意其他类中可调用该成 ...
- SQLServer中char、varchar、nchar、nvarchar的区别：
(1) 定义: char: 固定长度,存储ANSI字符,不足的补英文半角空格. nchar: 固定长度,存储Unicode字符,不足的补英文半角空格 varchar: 可变长度 ...
- 【转】Java八种基本数据类型的比较及其相互转化
java中有且仅有八种基本数据类型,记住就行,共分为四类: 第一类:整型-->byte short int long 第二类:浮点-->float doub ...