directive组件作用域 #14
Description
- false，继承父作用域（默认值），父能影响子，子也能影响父;
- true，继承父作用域，并且创建自己的作用域（子作用域），父能影响子，子不能影响父;
- {}，创建一个全新的隔离作用域，父子互不影响；
<!DOCTYPE html>
<html ng-app="wsscat">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/angular.js"></script>
<body>
<article ng-controller="indexCtrl">
<p>父作用域：</p>
<input ng-model="name" />
<section>
<p>组件作用域：</p>
<wsscat></wsscat>
<wsscat1></wsscat1>
<wsscat2></wsscat2>
</section>
</article>
</body>
<script>
var app = angular.module('wsscat', []);
app.controller('indexCtrl', function($scope) {
$scope.name = 'wsscat';
})
app.directive('wsscat', function() {
return {
restrict: "EAMC",
template: "<p>双向数据绑定<br /><input ng-model='name' /></p>",
scope: false
}
})
app.directive('wsscat1', function() {
return {
restrict: "EAMC",
template: "<p>父影响子，子不能影响父<br /><input ng-model='name' /></p>",
scope: true
}
})
app.directive('wsscat2', function() {
return {
restrict: "EAMC",
template: "<p>互不影响<br /><input ng-model='name' /></p>",
scope: {}
}
})
</script>
<style>
article{
border: 1px solid #009689;
}
section{
border: 1px solid #22FFFF;
}
</style>
</html>