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 ...
随机推荐
- <mvc:annotation-driven/>与<mvc:default-servlet-handler/>之间的一个问题
<mvc:annotation-driven/>与<mvc:default-servlet-handler/>之间的一个问题 在做项目的时候,我希望静态资源由WEB服务器默认的 ...
- MSSQL 判断临时表是否存在
方法一: if exists (select * from tempdb.dbo.sysobjects where id = object_id(N'tempdb..#tempcitys') and ...
- Fragment的陷阱(转)
以前做过的一个项目,Fragment嵌套高德地图,当再次进入Fragment的时候,会出现奇怪的现象.嵌套的地图会出现滑动不动的情况,起先还以为是高德的bug呢,经过一番研究,终确定这是一个坑. 先对 ...
- DDL DML DCL语句
总体解释:DML(data manipulation language):自动提交的数据库操作语言 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样 DDL( ...
- XE6移动开发环境搭建之IOS篇（5）：解决Windows和虚拟机下Mac OSX的共享问题（有图有真相）
网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 在安装XE6 PAS ...
- Node以数据块的形式读取文件
在Node中,http响应头信息中Transfer-Encoding默认是chunked. Transfer-Encoding:chunked Node天生的异步机制,让响应可以逐步产生. 这种发送数 ...
- SmartWiki文档在线管理系统简介
简介 SmartWiki是一款针对IT团队开发的简单好用的文档管理系统.可以用来储存日常接口文档,数据库字典,手册说明等文档.内置项目管理,用户管理,权限管理等功能,能够满足大部分中小团队的文档管理需 ...
- 常见面试问题 - Useful Links
1. Data Structure & Algorithm - 二叉树 http://baike.baidu.com/link?url=jKNdOOipbp-gloTVmSU4PT2mVB94 ...
- Oracle中快速查询和操作某个用户下的所有表数据信息
一.禁止所有的外键约束 在pl/sql developer下执行如下语句:SELECT 'ALTER TABLE ' || table_name || ' disable CONSTRAINT ' | ...
- 通过案例对 spark streaming 透彻理解三板斧之二：spark streaming运行机制
本期内容: 1. Spark Streaming架构 2. Spark Streaming运行机制 Spark大数据分析框架的核心部件: spark Core.spark Streaming流计算. ...