AngularJS中ng-repeat使用心得
阿新 • • 發佈:2019-01-31
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建立的子作用域會繼承父作用域的值和物件,如果對子作用域繼承的基本型別變數修改,父作用域的值不會改變,對子作用域繼承的物件和陣列進行修改,父作用域的值也會跟著改變。