AngularJS自定義指令directive：父類scope和指令中scope之間的通訊
阿新 • • 發佈：2019-01-03
我們知道angularJs中，指令中有scope，父類controller中也有scope，兩者的通訊方式有三中，分別是
- scope：false；直接使用父類的scope
- scope：true；繼承父類的scope
- scope：｛@，=，&｝隔離的scope
但是1和2兩種都有一定的缺陷，（1）直接使用父類，也就是在指令中也可以任意修父類的物件，這樣使得父類物件被各種指令所修改。（2）繼承父類，如果是物件傳遞到指令中，則可以直接造成父類的物件也修改，但是如果直接只是一個字串，則父類的不會被修改。這個雖然比1種情況好一點，但是對於一個指令被用於多個位置的時候，專案中希望的是有些物件被修改，有些物件不會被修改。怎麼樣才能達到修改自如的情況，一般使用的是3種情況的scope，即隔離的scope。那麼第3種情況，怎麼實現傳遞字串和傳遞物件。
1.最簡單的scope
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo22.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta 結果是hello
2.帶指令的傳遞字串的scope用的是@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo22.html</title>
<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>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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:'<div>指令中的name: {{body}}</div>',
scope:{
body:'@'
},
}
})
</script>
</body>
</html>
結果是：
hello：hello
指令中的name:hello
3.在指令中修改字串
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo22.html</title>
<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>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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:'<div>指令中的name: {{body}}</div>',
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用的是=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo22.html</title>
<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>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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:'<div>指令中的name: {{body.age}}</div>',
scope:{
body:'='
},
}
})
</script>
</body>
</html>
結果是：
hello：hello
指令中的name:hello
5.指令中修改物件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo22.html</title>
<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>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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:'<div>指令中的name: {{body.age}}</div>',
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了。