angularjs某些指令在外部作用域继承并创建新的子作用域引申出的“值复制”与“引用复制”的问题

<!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>

某些指令指的是:

ng-include
ng-switch
ng-repeat
ng-view
ng-controller
ng-if

避免指令从外部作用域继承并创建一个新的子作用域的方式 使用ng-include为例:

<div ng-include="/test.html" ng-controller="ctrl">
  hello {{name}}
</div>

这里的ng-controller非常重要 等同于你手动指定了某个特定的作用域

这样ng-include指令就不会像往常一样从外部作用域继承并创建一个新的子作用域

这段代码在这里只是做个例子,不具备任何意义

这里我着重说下值复制,引用复制没啥可说的

  /*
            关于值复制:
            
            ChildController属于SomeController的子作用域 那么理所应当 在子作用域中的$scope.someBareValue没有初始值的时候,
            他会复制父作用域中$scope.someBareValue的值作为自己的值,当父作用域中的$scope.someBareValue的值改变时也会造成子作用域
            中的$scope.someBareValue的值改变,但是当子作用域中的$scope.someBareValue有初始值的时候,父作用域和子作用域中的$scope.someBareValue
            就成了两个完全不一样的东西了

            通俗点讲就是:当你兜里没钱的时候,你爸爸兜里的钱就是你的钱,你爸爸有钱你就有钱,你爸爸没钱你就没钱。
            但是当你组建了家庭能够自己挣钱的时候,你爸爸就留着他自己的钱养老了,不会再给你了,而你的钱从始至终都属于你自己!
            这里只是做个例子,不具备任何意义
  */
 
原文地址:https://www.cnblogs.com/BGOnline/p/5953190.html