scope是控制directive中的变量与引用directive的controller之间的关系的重要属性。其有四种修饰符
- =表示共享某个变量 Two-way model binding
- &表示共享某个方法(回调) Callback method binding
- @表示传递某个值 Attribute string binding
如果不写scope,默认与controller共享scope
例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
<div>contoler数据：{{myData}}</div>
<div my-directive>
</div>
</div>
<script>
var app = angular.module('app', []);
app.directive('myDirective', [function() {
return {
replace: true,
template: '<div>directive数据：{{myData}}<button ng-click="change()">改变</button></div>',
link: function(scope) {
}
}
}])
app.controller('ctrl1', ['$scope', function($scope) {
$scope.myData = 'controller data';
$scope.change = function(){
$scope.myData = 'ha ha ha';
}
}])
</script>
</body>
</html>
点击改变按钮时，contorller和diretive中的myData都变成了ha ha ha。共享scope时（即不隔离），diretive可以完全使用，覆盖controller的变量和方法，反之也一样。当然这样在实际项目中会造成灾难性的影响，官方也不建议这样做。英文原文是： This is clearly not a great solution.
scope:{},即最简单的隔离，contoller和directive使用完全不同的scope,互不影响.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
<div>contoler数据：{{myData}}</div>
<div my-directive>
</div>
</div>
<script>
var app = angular.module('app', []);
app.directive('myDirective', [function() {
return {
replace: true,
template: '<div>directive数据：{{myData}}<button ng-click="change()">改变</button></div>',
scope:{},
link: function(scope) {
scope.myData = 'directive data';
}
}
}])
app.controller('ctrl1', ['$scope', function($scope) {
$scope.myData = 'controller data';
$scope.change = function(){
$scope.myData = 'ha ha ha';
}
}])
</script>
</body>
</html>
controller中的myData和directive中的myData不同，点击改变按钮也没用。
=示例
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
<div>contoler数据：{{myData}}</div>
<div my-directive my-data-a = 'myData'>
</div>
</div>
<script>
var app = angular.module('app', []);
app.directive('myDirective', [function() {
return {
replace: true,
template: '<div>directive数据：{{myData}}<button ng-click="change()">改变</button></div>',
scope:{
// myData: '=',如果名称相同可省略
myData: '=myDataA'
},
link: function(scope) {
scope.change=function(){
scope.myData = 'ha ha ha';
}
}
}
}])
app.controller('ctrl1', ['$scope', function($scope) {
$scope.myData = 'controller data';
}])
</script>
</body>
</html>
点击改变按钮，controller和directive的myData都变成了ha ha ha;
@示例
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
<div>contoler数据：{{myData}}</div>
<div my-directive my-data-a = 'ba ba ba'>
</div>
</div>
<script>
var app = angular.module('app', []);
app.directive('myDirective', [function() {
return {
replace: true,
template: '<div>directive数据：{{myData}}<button ng-click="change()">改变</button></div>',
scope:{
// myData: '=',如果名称相同可省略
myData: '@myDataA'
},
link: function(scope) {
scope.change=function(){
scope.myData = 'ha ha ha';
}
}
}
}])
app.controller('ctrl1', ['$scope', function($scope) {
$scope.myData = 'controller data';
}])
</script>
</body>
</html>
此例中，directive的myData值为ba ba ba。点击改变按钮，directive的myData为ha ha ha,controller的myData不受影响。
&示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
<div>contoler数据：{{myData}}</div>
<div my-directive on-change="change(value)">
</div>
</div>
<script>
var app = angular.module('app', []);
app.directive('myDirective', [function() {
return {
replace: true,
template: '<div>directive数据：{{myData}}<button ng-click="change()">改变</button></div>',
scope:{
// myData: '=',如果名称相同可省略
// myData: '@myDataA'
onChange: '&onChange'
},
link: function(scope) {
scope.myData = 'directive data';
scope.change = function(){
scope.onChange({
value: 'ha ha ha'
});
}
}
}
}])
app.controller('ctrl1', ['$scope', function($scope) {
$scope.myData = 'controller data';
$scope.change = function(value){
$scope.myData = value;
}
}])
</script>
</body>
</html>
点击改变按钮，controller的myData变成ha ha ha。directive的myData不受影响。 注意directive中调用共享的方法的时候，传值是一个object, key为参数名.
![【angular】环境搭建及遇到的问题[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)