我们之所以要定义指令,目的是重用指令。假设有这么一个应用场景:在同一个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>

在浏览器中查看:

Hello !
Hello World!
Hello World!
可见,指令里若添加了scope:{},不管给定的是空对象还是什么,都会隔离指令的作用域。
这使得上面例子里的my-directive指令无法解析myGreet,而未隔离作用域的my-directive2指令却可以解析myGreet

下面简单说明一下@=&三个符号的意义。

=不同于@,它绑定的是变量引用,例子:

<!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的更多相关文章

  1. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJs自定义指令详解(6) - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  3. AngularJs自定义指令详解(2) - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  4. AngularJs自定义指令详解(5) - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  5. AngularJs自定义指令详解(9) - terminal

    例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  6. AngularJs自定义指令详解(8) - priority

    priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...

  7. AngularJs自定义指令详解(7) - multiElement

    multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...

  8. AngularJs自定义指令详解(10) - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  9. AngularJs自定义指令详解(4) - transclude

    transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...

随机推荐

  1. MVC:上传文件时限制文件类型

    之前写过一篇:MVC:上传文件 今天补充下一个功能:如何限制上传文件类型 文件类型可以在前段限制,但是太容易被绕过,最好还是在后端处理. 修改upload方法代码: [HttpPost] public ...

  2. Spark RDD类源码阅读

    每天进步一点点~开搞~ abstract class RDD[T: ClassTag]( //@transient 注解表示将字段标记为瞬态的 @transient private var _sc: ...

  3. [Tex学习]编号

    \documentclass{ctexart}\usepackage{enumerate}\begin{document}\begin{enumerate}[{case}1]\item new\ite ...

  4. Capture a Screen Shot

    using System; using System.Runtime.InteropServices; using System.Drawing; using System.Drawing.Imagi ...

  5. eclipse中如何关闭运行时自动保存?

    Eclipse没有提供自动保存的功能,只能自己写脚本每隔多久保存一次,或监听修改即保存.设置方法:1.打开:preferences>run/debug>launching2.选择save ...

  6. 使用Atlas实现MySQL读写分离

    1.MySQL所在机器 192.168.29.128(Master) 192.168.29.129(Slave) 配置好主从同步,参考 http://www.cnblogs.com/luxh/p/40 ...

  7. Debian 7.6 新编译内核 3.15.6 开机加载黑屏

    需要手动加载 fbcon 这个模块,或者编译内核的时候,Framebuffer Console support 编译进内核(后者没测试过).加在模块只要修改/etc/default/grub文件或者/ ...

  8. MC3190终端配置冷启动自动恢复的方法

    一. 网络配置的恢复 将当前文件夹下的注册表文件MC3190 Start Config.reg(见附件)复制到终端的Application文件夹内(可以通过数据线或ftp方式传送文件); 导出终端的网 ...

  9. JS-改变页面的颜色(三)

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值           和第二个例 ...

  10. 用odbc连接oracle问题

    如果用11g的客户端,然后通过odbc(远程连接)连接10g的oracle,会出现监听程序无法启动(ORA-12541: TNS: 无监听程序) 此时需要在客户端目录中D:\instantclient ...