Question

为什么在$scope.counter内的this jsfiddle ChildController3无法解析为ParenctController的{{1}}但在本地{{1}创建$scope.counter }}？

复制代码：

HTML

counter

JS

$scope

Answer 1

试试这个：

<div ng-app='app'>
   <div ng-controller="ParentController">    
       <h2>ChildController1</h2>
        <div ng-controller="ChildController1">
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
        </div>
       <h2>ChildController2</h2>
       <div ng-controller="ChildController2">
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
           <br/>
            {{ number.counter }} <- this is in local scope
        </div>
        {{ number.counter }} <- this is in parent scope
       <h2>ChildController3</h2>
        <div ng-controller="ChildController3">            
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
            <br/>
            {{ number.counter }} <- this is in local scope
        </div> 

    </div>
</div>


var app = angular.module("app",[]);
app.controller('ParentController', function($scope) 
            {
                $scope.number = {};
                $scope.number.counter = 5;
            });

app.controller('ChildController1', function ($scope) {

            $scope.add = function () { 
                 $scope.number.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.number.counter -= 1;
            };
        });

app.controller('ChildController2',function($scope) {

            $scope.add = function () { 
                $scope.$parent.number.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.$parent.number.counter -= 1;
            };
        });

app.controller('ChildController3', function($scope) {

            $scope.add = function () { 
                $scope.number.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.number.counter -= 1;
            };
        });

这是因为你在'ChildController3'中覆盖你的$ scope.counter。

在这里，请在30分钟看到此视频，以便更好地解释此问题： AngularJS MTV Meetup: Best Practices

这里发生的事情是因为你声明了“$ scope.number = {};”在“ParentController”里面，所以当你在“ChildController3”中使用它“$ scope.number.counter”时，你引用了ParentController，而不是在你刚刚覆盖“ChildController3”里面的“$ scope.counter”之前。

Answer 2

这是因为层次结构中不同级别的范围使用原型继承共享范围。

纯JS的例子是：

function A(){
    this.count = 5;
}

function B(){       
}

a = new A();
B.prototype = a;
b = new B();

console.log(a.count,b.count); // gives 5 5    <--- shared

a.count++;

console.log(a.count,b.count);  // give 6 6    <----- still shared

b.count++;

console.log(a.count,b.count); // gives 6 7   <----- link broken

a.count++;

链接断开是因为在“b.count ++;”之后b真的有一个count属性，之前它只是一个原型属性。

有关详情，请访问：Angular scope docs

为什么Child Controller中的$ scope.variable未解析为父控制器中的$ scope.variable

2 个答案: