angualr作用域 Scope
控制器作用域的继承特性Ⅰ
- 绑定的数据是变量
- 单向隔离（兄弟之间互不影响，父子之间单向继承）
- 父级控制器的数据绑定会影响到子级控制器
- 前提是子控制器内没有绑定数据
- 单向原理：当我们改变子控制器数据时，其会在子控制器内部动态添加`$scope.name='XXX'`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name">
<div ng-controller="myCtr1">
<input type="text" ng-model="name">
</div>
<div ng-controller="myCtr2">
<input type="text" ng-model="name">
</div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name ='scale'
}]);
app.controller('myCtr1', ["$scope",function($scope){
}]);
app.controller('myCtr2', ["$scope",function($scope){
}]);
</script>
</body>
</html>
控制器作用域的继承特性Ⅱ
- 绑定的数据是对象
- 双向影响（父级影响子级，子级影响父级）
- 双向原理：其会找子作用域有没有对象类型数据绑定，若没有，找父级，找到后在原有对象数据上动态添加`$scope.name={title:'XXX'}`，从而再次影响子级
- 不像变量，会直接在子作用域添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name.title">
<div ng-controller="myCtr1">
<input type="text" ng-model="name.title">
</div>
<div ng-controller="myCtr2">
<input type="text" ng-model="name.title">
</div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name ={title: 'scale'}
}]);
app.controller('myCtr1', ["$scope",function($scope){
}]);
app.controller('myCtr2', ["$scope",function($scope){
}]);
</script>
</body>
</html>
scope:true; scope:false; scope:{}
- scope:true,自定义指令不会影响父作用域，即：有自己的作用域与外隔离，单向继承，默认为false,双向影响
- scope:{} 完全隔离，互不影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name">
<div ng-controller="myCtr1">
<input type="text" ng-model="name">
</div>
<div ng-controller="myCtr2">
<input type="text" ng-model="name">
</div>
<div my-title></div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name = 'scale';
}]);
app.controller('myCtr1', ["$scope",function($scope){
}]);
app.controller('myCtr2', ["$scope",function($scope){
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '<input type="text" ng-model="name">',
scope: true //scope:true,自定义指令不会影响父作用域，即：有自己的作用域与外隔离，单向继承（父影响子），默认为false,双向影响
}
});
</script>
</body>
</html>
(@ 、= 、&)
- （@）单向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="color">
<h1 my-title color="{{color}}"></h1>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name='德玛西亚';
$scope.color="red"
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '{{color}}<span style="color:{{color}}">德玛西亚</span><input type="text" ng-model="color">',
scope: {color:'@color'} //通过（@）号实现指令与控制器单向数据绑定
}
});
</script>
</body>
</html>
- (=)双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name">
<h1 my-title color="name"></h1>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name='red';
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '<span style="color:{{color}}">德玛西亚</span><input type="text" ng-model="color">',
scope: {color:'=color'} //通过（=）号实现指令与控制器双向数据绑定
}
});
</script>
</body>
</html>
- (&)调用父作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<h1 my-title color="callback()"></h1>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.callback = function () {
return '德玛西亚';
}
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '<h3>{{color()}}</h3>',
scope: {color:'&color'} //通过&符号调用父作用
}
});
</script>
</body>
</html>