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 ...
随机推荐
- linux 下 用户与用户组
1,增加一个test组:groupadd test 2,将test组重命名test2:groupmod -n test2 test 3,删除test2组:groupdel test2 4,查看当前登录 ...
- 分布式任务分发框架Gearman教程和PHP实现实例
1.Gearman介绍和使用场景 Gearman是一个分发任务的程序框架,可以用在各种场合,与Hadoop相 比,Gearman更偏向于任务分发功能.它的任务分布非常简单,简单得可以只需要用脚本即可完 ...
- Hololens开发笔记之Gesture手势识别（手势检测反馈）
本文实现当使用者手出现在Hololens视野范围内时,跟踪手并给出反馈的效果. 1.在Manager上添加HandsManager脚本组件,用于追踪识别手 HandsManager.cs如下(直接使用 ...
- discuz论坛与其它网站登录注册整合
discuz论坛与其它网站登录注册整合 本文以discuz 7.0.0 php版本的论坛与 .net 2.0的网站注册登录整合为类.没有采用uc_center或第三方插件.以另类的方式实现.此方法实现 ...
- 在sql语句中添加php变量
在sql语句中使用{}将php变量扩起来,php就会解析{}中的内容. //案件统计 function getCount($dsql,$tableName,$year){ //诉讼案件总数,总金额 $ ...
- 39. Recover Binary Search Tree && Validate Binary Search Tree
Recover Binary Search Tree OJ: https://oj.leetcode.com/problems/recover-binary-search-tree/ Two elem ...
- RNN神经网络和英中机器翻译的实现
本文系qitta的文章翻译而成,由renzhe0009实现.转载请注明以上信息,谢谢合作. 本文主要讲解以recurrent neural network为主,以及使用Chainer和自然语言处理其中 ...
- 转：Connection: close和Connection: keep-alive有什么区别？
原文:http://www.cnblogs.com/TinyMing/p/4597136.html 一.问题现象: 一个JSP页面,居然要耗时40多秒.网页中有大量的图片的CSS问题解决: 原因也找了 ...
- openStack镜像制作
参考链接: https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/OpenStack/page/Creating ...
- linux 搭建 nexus 私服及配置
安装篇 1.tar -zxvf nexus-latest-bundle.tar.gz 2.cd nexus-2.13.0-01/bin 3../nexus start 这时可能提示 ********* ...