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 ...
随机推荐
- Notepad++快捷键&正则表达式替换字符串&插件
Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数): 1. 文件 ...
- DOM节点访问
简而言之,DOM(即文档对象模型)是一种将XML或HTML文档解析成树形节点的方法.通过DOM的方法与属性,我们就可以访问到页面中的任何元素,并进行元素的修改.删除以及添加的操作.同时,DOM也是一套 ...
- C++模板元编程 - 函数重载决议选择工具（不知道起什么好名）完成
这个还是基于之前实现的那个MultiState,为了实现三种类型“大类”的函数重载决议:所有整数.所有浮点数.字符串,分别将这三种“大类”的数据分配到对应的Converter上. 为此实现了一些方便的 ...
- php操作文件及下载图片脚本
<?php set_time_limit(0); $handle = fopen('article.txt','r'); for($i=0;$i<1;$i++) { $count = 0; ...
- ASP.NET中进行消息处理(MSMQ) 二(转)
在我上一篇文章<ASP.NET中进行消息处理(MSMQ)一>里对MSMQ做了个通俗的介绍,最后以发送普通文本消息和复杂的对象消息为例介绍了消息队列的使用. 本文在此基础上继续介 ...
- 【javascript基础】7、继承
前言 由于本人水平有限,所以有些高手觉得现在写的内容偏容易,要一点点来嘛,今天和大家学习或者复习一下javascript的继承.我也就是尽量写吧······ 继承 javascript的继承其实主要就 ...
- 67. Container With Most Water
Container With Most Water Given n non-negative integers a1, a2, ..., an, where each represents a poi ...
- pytion学习1
个人感觉学习一门新语言,简单的语法懂一点足矣.接下来就是编程.读懂别人程序的每一句,理解每一句的意义. #Filename:MyAddressBook.py import cPickle as p i ...
- ios base64图片上传失败问题
今天做图片上传,后台用的是base64解密图片二进制文件,以前都是用表单上传来解决图片上传的,现在后台没有人改,所以研究下base64上传. 需要将图片base64加密,但是调用 [data base ...
- c# 文件夾操作
#region 圖片對應異動 string newFilePath = "~/FileUpLoad/Book/" + bookModel.BookNo; ...