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 ...
随机推荐
- bzoj2515 Room
Description Input Output 折半搜索,用散列表记录从原点出发,用了S(状压表示)这几种边(令|S|*2-1<=n),到达(x,y)的最大面积. #include<cs ...
- linux net command /uboot command
1. uboot command 读取寄存器内容 md [内存地址][长度] 修改内存地址 mw [内存地址][长度] 2. linux络命令 -- netstat -a (all)显示所有选项,默 ...
- AngularJS 中利用 Interceptors 来统一处理 HTTP 的错误(reproduce)
原文:http://chensd.com/2016-03/Angular-Handle-Global-Http-Error-with-Interceptors.html?utm_source=tuic ...
- 相机标定：关于用Levenberg-Marquardt算法在相机标定中应用
LM算法在相机标定的应用共有三处. (1)单目标定或双目标定中,在内参固定的情况下,计算最佳外参.OpenCV中对应的函数为findExtrinsicCameraParams2. (2)单目标定中,在 ...
- Karma：2. 集成 Karma 和 mocha 进行单元测试
上一篇文章讨论了如何集成 Karma 和 Jasmine,地址见:Karma:1. 集成 Karma 和 Jasmine 进行单元测试 这篇文章讨论如何 Karma 集成 mocha 测试框架. 安装 ...
- R型思维模式对软件开发的影响（草稿）
The pragmatic programmers 一直在工作之余读些书,之前主要是纯英文版的计算机相关的算法,编译器,数学等,想通过读这些书来提高自己每日工作效能,结果收效甚微.一是,因为纯英文的书 ...
- python中的装饰器
一.什么是装饰器 装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等.装饰器是解决这类问题的绝佳设计,有了装饰器,我们就可以抽离出大量函数中与函数功能 ...
- 5，SFDC 管理员篇 - 数据模型 - 数据关联
1,PickList 1,填写基本信息 2, 选择能角色的权限 3,在哪一个层上显示(object 上有多个 Record Type 对应多个层,需要选择在哪一个层显示) 4,Save 2,两个P ...
- 纸上谈兵：AVL树
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 二叉搜索树的深度与搜索效率 我们在树, 二叉树, 二叉搜索树中提到,一个有n个节点 ...
- 项目名 的在JSP或JAVA中的另类写法
在JSP页面中${pageContext.request.contextPath } 表示项目名<form action="${pageContext.request.contextP ...