AngularJs自定义指令详解（3） - scope
我们之所以要定义指令，目的是重用指令。假设有这么一个应用场景：在同一个html里使用了两次my-directive，第一个my-directive要展示的是Hello World，第二个my-directive要展示的是Hello AngularJs。
为了实现上面的想法，一个做法是创建两个控制器（因为控制器会创建子作用域，与外界隔离开），分别定义‘World’和‘AngularJs’输出：
<!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',[])
.controller('myController',function($scope){
$scope.greeting = 'World';
})
.controller('myController2',function($scope){
$scope.greeting = 'AngularJs';
})
.directive('myDirective',function(){
return{
template:'Hello {{greeting}}!' };
});
</script>
</head>
<body ng-app="app">
<div ng-controller="myController" my-directive></div>
<div ng-controller="myController2" my-directive></div>
</body>
</html>
目的是达到了，但是做法显得繁琐，这样的指令重用不够简洁。
最好的做法当然是类似下面的形式：
<div my-directive greeting="World"></div>
<div my-directive greeting="AngularJs"></div>
怎么做到这一点呢？答案就是使用指令的scope参数，隔离指令的作用域：
<!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',[])
.directive('myDirective',function(){
return{
template:'Hello {{greeting}}!',
scope:{
greeting:'@'
}
};
});
</script>
</head>
<body ng-app="app">
<div my-directive greeting="World"></div>
<div my-directive greeting="AngularJs"></div>
</body>
</html>
如果不希望属性名还是greeting，想改个别名，可以这样：
<!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',[])
.directive('myDirective',function(){
return{
template:'Hello {{greeting}}!',
scope:{
greeting:'@greet'
}
};
});
</script>
</head>
<body ng-app="app">
<div my-directive greet="World"></div>
<div my-directive greet="AngularJs"></div>
</body>
</html>
注意template里还是使用的greeting，如果改为greet，就解析不出来了！
再看下面的代码：
<!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',[])
.directive('myDirective',function(){
return{
template:'Hello {{myGreet}}! ',
scope:{ }
};
})
.directive('myDirective2',function(){
return{
template:'Hello {{myGreet}}! '
};
});
</script>
</head>
<body ng-app="app">
<div ng-init="myGreet='World'"></div>
<div my-directive></div>
<div my-directive2></div>
<div>Hello {{myGreet}}!</div>
</body>
</html>
在浏览器中查看：
下面简单说明一下@=&三个符号的意义。
=不同于@，它绑定的是变量引用，例子：
<!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',[])
.directive('myDirective',function(){
return{
template:'Hello {{greeting}}! ',
scope:{
greeting:'='
}
};
});
</script>
</head>
<body ng-app="app">
<div ng-init="greet='world'" my-directive greeting="greet"></div>
</body>
</html>
输出:
Hello world!
如果=号改成@，那么输出的就是“Hello greet!”了。
我就不爱用=，我非要用@，那也可以：
<!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',[])
.directive('myDirective',function(){
return{
template:'Hello {{greeting}}! ',
scope:{
greeting:'@'
}
};
});
</script>
</head>
<body ng-app="app">
<div ng-init="greet='world'" my-directive greeting="{{greet}}"></div>
</body>
</html>
输出:
Hello world!
来个双向绑定玩玩：
<input ng-model="greet"/>
<div ng-init="greet='world'" my-directive greeting="greet"></div>
输出：
符号&表示绑定一个函数：
<!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.test = function(){
alert('ok');
};
})
.directive('myDirective',function(){
return{
template:'<button ng-click="greeting()">click me!</button>',
scope:{
greeting:'&'
}
};
});
</script>
</head>
<body ng-app="app">
<div my-directive greeting="test()"></div>
</body>
</html>
注意在template里，函数名必须跟scope里定义的一致，都是greeting
AngularJs自定义指令详解（3） - scope的更多相关文章
- 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自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- 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自定义指令详解（7） - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
- AngularJs自定义指令详解（10） - 执行次序
代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解（4） - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
随机推荐
- SpringMVC学习系列（5） 之 数据绑定-2
在系列(4)中我们介绍了如何用@RequestParam来绑定数据,下面我们来看一下其它几个数据绑定注解的使用方法. 1.@PathVariable 用来绑定URL模板变量值,这个我们已经在系列(3) ...
- DBMS_JOBS
http://blog.itpub.net/23055736/viewspace-1115938/
- MessageBox
首先要知道MessageBox返回的值为DialogResult类型.返回值可能有如下: DialogResult.OK //点击“确定”按钮后返回的值 DialogResult.YES //点击 ...
- CPS冥想 - 2 手撸控制流
原博客链接:http://blogs.msdn.com/b/ericlippert/archive/2010/10/22/continuation-passing-style-revisited-pa ...
- 在 SQL Server 数据库的 WHERE 语句中使用子查询
这是关于子查询语句的一系列文章中的第三篇.在这篇文章中我们将讨论WHERE语句中的子查询语句.其他的文章讨论了其他语句中的子查询语句. 本次课程中的所有例子都是基于Microsoft SQL Serv ...
- 2. xargs 命令
1.简介 xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处理.通常情况下,xargs从管道或者stdin中读取数据,但是 ...
- XE6移动开发环境搭建之IOS篇（6）：设置Mac OSX的网络。（有图有真相）
网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 我们配置一下MAC的 ...
- java通过jdbc连接impala
下载所需jar包:http://www.cloudera.com/downloads/connectors/impala/jdbc/2-5-28.html 选择使用impalajdbc41版本 imp ...
- OPTIMIZE TABLE的作用--转载
当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删 除操作后在数据文件中留下碎片所致.Discuz! 在系统数设置界面提供了数据表优化的功能,可以去除删除操作后留下的数据文件 ...
- php使用递归计算目录大小
本文章向大家介绍php如何计算某个目录的大小(多少kb,多少兆m),主要使用filesize函数配合递归函数的方法来实现,需要的朋友可以参考一下本文章的源代码.php使用递归计算目录大小,主要使用fi ...