本文通过实例详细解析了AngularJS中Scope的继承机制，包括控制器间的模型传递、对象和数组类型的双向绑定，以及ng-repeat指令如何创建新Scope。
上面一篇转载的博文介绍了angularjs中的scope,下面验证下．
嵌套controller
子controller访问父controller中的model
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('ParentController', function($scope) {
$scope.name = "parent";
});
app.controller('SonController', function($scope) {
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="ParentController">
<input type="text" ng-model="name" />
<span>{{name}}</span>
<div ng-controller="SonController">
<input type="text" ng-model="name" />
<span ng-bind="name"></span>
</div>
</div>
</body>
</html>
可以看到，子controller中并没有name变量，于是便到父controller中寻找，直到$rootScope;
如果此时在子scope输入框中输入值，那么可以看到
子controller中值改变了，但是父controller中没有改变.子controller在自己的scope中新建了一个name于是覆盖隐藏了父controller中的name,跟父controller中的name没有关联.
假如我们初始化一下子controller中的name
var app = angular.module('myapp', []);
app.controller('ParentController', function($scope) {
$scope.name = "parent";
});
app.controller('SonController', function($scope) {
$scope.name = "son";
});
结果是一样的，子controller创建了属于自己scope的name.
如果说我们要求子controller跟父controller关联，产生双向数据绑定，也就是不让子controller创建属于自己的name,可以这么做．
<div ng-controller="ParentController">
<input type="text" ng-model="name" />
<span>{{name}}</span>
<div ng-controller="SonController">
<input type="text" ng-model="$parent.name" />
<span ng-bind="$parent.name"></span>
</div>
</div>
在变量前加上$parent, 那么子controller不在创建自己的属性．而是与父controller直接访问操作父controller中的name属性了．
接下来我们再来看看如果model类型不是基本数据类型，而是对象(数组在js中也是对象).
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('ParentController', function($scope) {
$scope.person = {name : "parent"};
});
app.controller('SonController', function($scope) {
$scope.person.name = 'son';
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp">
<div ng-controller="ParentController">
<input type="text" ng-model="person.name" />
<span>{{person.name}}</span>
<div ng-controller="SonController">
<input type="text" ng-model="person.name" />
<span ng-bind="person.name"></span>
</div>
</div>
</body>
可以看到，父controller中person对象name属性本来的值是parent,但是子controller赋值为son导致父controller的改变，两者数据绑定.
注意此处子controller直接是$scope.person.name = 'son';子controller中并没有person对象．
下面换种写法
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('ParentController', function($scope) {
$scope.person = {name : "parent"};
});
app.controller('SonController', function($scope) {
$scope.person = {name : 'son'};
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp">
<div ng-controller="ParentController">
<input type="text" ng-model="person.name" />
<span>{{person.name}}</span>
<div ng-controller="SonController">
<input type="text" ng-model="person.name" />
<span ng-bind="person.name"></span>
</div>
</div>
</body>
$scope.person = {name : 'son'};在子controller上定义创建了和父controller一样的对象，可以看到子controller与父controller无关了,任何一方改变不再影响另一方．
如果此时要让两者绑定怎么做，还是一样使用$parent.
上面的一切都是js的原型继承导致的.
下面继续研究angular的scope继承.
ng-repeat
<!-- <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('myController', function($scope) {
$scope.$index = 1;
$scope.change = function() {
$scope.$index++;
}
});
app.directive('duplicate', function(){
return {
transclude: 'element',
priority: 1000,
link: function(scope, elem, attrs, ctrl, transclude) {
var times = parseInt(attrs.duplicate);
var previous = elem;
var childScope;
for(var i = 0; i < times; i++) {
childScope = scope.$new();
childScope.$index = i;
transclude(childScope, function(clone){
console.log(previous)
previous.after(clone);
previous = clone;
});
}
}
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp" ng-controller="myController">
<input type='text' ng-model='$index' duplicate="5" />
<br/>
<input type="text" ng-model="$index">
<button class="btn btn-primary" ng-click="change()">click</button>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('myController', function($scope) {
});
app.directive('duplicate', function(){
return {
restrict: 'EA',
transclude: 'element',
replace: true,
link: function(scope, elem, attrs, ctrl, transclude) {
console.log(elem)
},
template:"<span ng-transclude>12</span>"
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp" ng-controller="myController">
<div duplicate>123</div>
</body>
</html> -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MyController', function($scope) {
$scope.ars = ['1', '2', '3'];
$scope.change = function(item) {
item++;
console.log($scope.ars);
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<ul>
<li ng-repeat="item in ars" ng-click="change(item)">{{item}}</li>
</ul>
</div>
</body>
</html>
ng-repeat创建了新的scope，原型继承自父scope，对于数组元素是基本数据类型，它只是把父scope中的值复制给了item，所以item改变值不会影响到父scope数组中的值，所以双向数据绑定也就无法实现．
依次点击三个item,结果如下
如果想要实现双向绑定那么该怎么做，只需把数组元素改为对象.那么就会将父scope中数组元素(对象)的引用给item，不是拷贝，所以一旦item对象改变，父scope中数组元素也相应改变.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MyController', function($scope) {
$scope.ars = [{num: '1'}, {num: '2'}, {num: '3'}];
$scope.change = function(item) {
item.num++;
console.log($scope.ars);
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<ul>
<li ng-repeat="item in ars" ng-click="change(item)">{{item.num}}</li>
</ul>
</div>
</body>
点击1，
可以看到数组中对象属性改变并反映在了视图中.
点击第2个
扫一扫
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
