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

AngularJS中ng-repeat使用心得

2016-11-25 12:23 323 查看

ng-repeat这样类似的指令是会创建一个新的作用域的，并且创建的新的作用域是原型继承的。这点其实和我的一篇《AngularUI之Modal的子作用域研究》类似，这次我也对指令的子作用域进行了研究，发现他们的创建子作用的方式是一样的。

下面是我的实验代码：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input type="text" ng-model="commentContent"/>
<input type="text" ng-model="cup.color"/>
<div ng-repeat="name in names">
<span>{{name.firstName}}</span>
<span>{{name.lastName}}</span>
<input type="text" ng-model="commentContent"/>
<input type="text" ng-model="cup.color"/>
</div>
</div>
<script>
var app = angular.module("app",[]);
app.controller("MyController",function($scope){
$scope.commentContent = "aaa";
$scope.cup = { color: "green"};
$scope.trees = [{},{}];
$scope.names = [{firstName:"john",lastName:"tech"},{firstName:"jack",lastName:"boom"}];
$scope.end = "happy ending";
$scope.name = {firstName:"aaa",lastName:"bbb"};
$scope.changeParent = function(event){
var keyCode = window.event?event.keyCode:event.which;
if(keyCode == 13){
$scope.commentContent = "bbb";
};
};
});
</script>
</body>
</html>

得出的结论是：

ng-repeat这样类似的指令创建的子作用域，基本类型的变量是值传递，对象和数组是地址传递。也就是说，ng-repeat创建的子作用域会继承父作用域的值和对象，如果对子作用域继承的基本类型变量修改，父作用域的值不会改变，对子作用域继承的对象和数组进行修改，父作用域的值也会跟着改变。

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

标签： angularjs ne-repeat 子作用域

相关文章推荐

新的分享

章节导航