您的位置：首页 > Web前端 > AngularJS

angular作用域分析

2016-12-29 18:14 387 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航