AngularJS自定义指令directive：父类scope和指令中scope之间的通信
我们知道angularJs中，指令中有scope，父类controller中也有scope，两者的通信方式有三中，分别是
- scope：false；直接使用父类的scope
- scope：true；继承父类的scope
- scope：｛@，=，&｝隔离的scope
但是1和2两种都有一定的缺陷，（1）直接使用父类，也就是在指令中也可以任意修父类的对象，这样使得父类对象被各种指令所修改。（2）继承父类，如果是对象传递到指令中，则可以直接造成父类的对象也修改，但是如果直接只是一个字符串，则父类的不会被修改。这个虽然比1种情况好一点，但是对于一个指令被用于多个位置的时候，项目中希望的是有些对象被修改，有些对象不会被修改。怎么样才能达到修改自如的情况，一般使用的是3种情况的scope，即隔离的scope。那么第3种情况，怎么实现传递字符串和传递对象。
1.最简单的scope
<html>
<head>
<title>demo22.htmltitle>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.3.js">script>
<script type="text/javascript" src="js/angular.min.js">script>
head>
<body ng-app="app">
<div ng-controller="controller">
hello:{{name}}
div>
<script>
var app = angular.module("app", []);
app.controller("controller", function($scope){
$scope.name = "hello";
});
script>
body>
html>
结果是hello
2.带指令的传递字符串的scope用的是@
<html>
<head>
<title>demo22.htmltitle>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.3.js">script>
<script type="text/javascript" src="js/angular.min.js">script>
head>
<body ng-app="app">
<div ng-controller="controller">
hello:{{name}}
<hello body="{{name}}">hello>
div>
<script>
var app = angular.module("app", []);
app.controller("controller", function($scope){
$scope.name = "hello";
});
app.directive("hello", function(){
return{
restrict:"ECMA",
template:'指令中的name: {{body}}</div>',
scope:{
body:'@'
},
}
})
script>
body>
html>
结果是：
hello：hello
指令中的name:hello
3.在指令中修改字符串
<html>
<head>
<title>demo22.htmltitle>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.3.js">script>
<script type="text/javascript" src="js/angular.min.js">script>
head>
<body ng-app="app">
<div ng-controller="controller">
hello:{{name}}
<hello body="{{name}}">hello>
div>
<script>
var app = angular.module("app", []);
app.controller("controller", function($scope){
$scope.name = "hello";
});
app.directive("hello", function(){
return{
restrict:"ECMA",
template:'指令中的name: {{body}}',
scope:{
body:'@'
},
link : function(scope, elements, attrs, controller){
console.log(scope.body);
scope.body = "bbb";
}
}
})
script>
body>
html>
结果是：
hello：hello
指令中的name:hello
结果还是一样的，说明@仅仅知识字符串的传递，在指令中修改scope不会对父类的scope字符串产生影响。
4.带指令的传递对象的scope用的是=
<html>
<head>
<title>demo22.htmltitle>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.3.js">script>
<script type="text/javascript" src="js/angular.min.js">script>
head>
<body ng-app="app">
<div ng-controller="controller">
hello:{{name.age}}
<hello body="name">hello>
div>
<script>
var app = angular.module("app", []);
app.controller("controller", function($scope){
$scope.name = {age:"hello"};
});
app.directive("hello", function(){
return{
restrict:"ECMA",
template:'指令中的name: {{body.age}}</div>',
scope:{
body:'='
},
}
})
script>
body>
html>
结果是：
hello：hello
指令中的name:hello
5.指令中修改对象
<html>
<head>
<title>demo22.htmltitle>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.3.js">script>
<script type="text/javascript" src="js/angular.min.js">script>
head>
<body ng-app="app">
<div ng-controller="controller">
hello:{{name.age}}
<hello body="name">hello>
div>
<script>
var app = angular.module("app", []);
app.controller("controller", function($scope){
$scope.name = {age:"hello"};
});
app.directive("hello", function(){
return{
restrict:"ECMA",
template:'指令中的name: {{body.age}}',
scope:{
body:'='
},
link : function(scope, elements, attrs, controller){
console.log(scope.body);
scope.body.age = "bbb";
}
}
})
script>
body>
html>
结果是：
hello：bbb
指令中的name：bbb。
总结：
如果选择隔离的scope，对上述的用法理解了，基本上你也知道怎么使用隔离的scope了。