<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title>在指令中使用子作用域</title>
<link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body>
<h4>JavaScript对象要么是值复制要么是引用复制。字符串、数字和布尔型变量是值 复制。数组、对象和函数则是引用复制。下面来看看这两个的区别</h4>
1.值复制
<div ng-controller="SomeController">
初始值：<input type="text" ng-model="someBareValue"><br>
{{ someBareValue }}
<button ng-click="someAction()">父作用域</button>
<div ng-controller="ChildController">
{{ someBareValue }}
<button ng-click="childAction()">子作用域</button>
</div>
</div>
1.引用复制
<div ng-controller="SController">
{{ someModel.someValue }}
<button ng-click="someAction()">父作用域</button>
<div ng-controller="CController">
{{ someModel.someValue }}
<button ng-click="childAction()">子作用域</button>
</div>
</div>
<script src="../angular.min.js"></script>
<script>
angular.module(‘app‘, [])
// 值复制
.controller(‘SomeController‘, function($scope) {
$scope.someBareValue = ‘‘; // 不赞成这样声明数据 应该以数据模型的方式声明一个对象 参见 引用复制
$scope.someAction = function() {
$scope.someBareValue = ‘hello human, from parent‘;
};
})
.controller(‘ChildController‘, function($scope) {
$scope.childAction = function() {
$scope.someBareValue = ‘hello human, from child‘;
};
})
// 引用复制
.controller(‘SController‘, function($scope) {
$scope.someModel = {
someValue: ‘hello computer‘
};
$scope.someAction = function() {
$scope.someModel.someValue = ‘hello human, from parent‘;
};
})
.controller(‘CController‘, function($scope) {
$scope.childAction = function() {
$scope.someModel.someValue = ‘hello human, from child‘;
};
});
</script>
</body>
</html>
这里我着重说下值复制，引用复制没啥可说的
/*
关于值复制：
ChildController属于SomeController的子作用域 那么理所应当 在子作用域中的$scope.someBareValue没有初始值的时候，
他会复制父作用域中$scope.someBareValue的值作为自己的值，当父作用域中的$scope.someBareValue的值改变时也会造成子作用域
中的$scope.someBareValue的值改变，但是当子作用域中的$scope.someBareValue有初始值的时候，父作用域和子作用域中的$scope.someBareValue
就成了两个完全不一样的东西了
通俗点讲就是：当你兜里没钱的时候，你爸爸兜里的钱就是你的钱，你爸爸有钱你就有钱，你爸爸没钱你就没钱。
但是当你组建了家庭能够自己挣钱的时候，你爸爸就留着他自己的钱养老了，不会再给你了，而你的钱从始至终都属于你自己！
物质上别吝啬自己的钱，对自己的亲人好一点！
*/
时间： 2024-08-27 09:17:41