子控制器不從父控制器繼承

Question

我一直在理解範圍繼承有很多麻煩，我盡我所能從父控制器傳遞數據對象到子控制器，但我似乎無法讓事情發揮作用。有人可以解釋爲什麼這不起作用嗎？謝謝！

編輯：我沒有指定這個較早，但它是一個項目需要使用約翰爸爸風格指南，所以我不能在任何控制器的使用$scope解決這個問題。

UPDATE：看來我誤解使用this的目的...基於從下面海報的幫助，我現在明白了，某些操作需要使用$scope和約翰爸爸的風格指南的簡單詢問開發人員使用this時適當，以避免衝突的範圍，而不是作爲一個替代爲範圍

JS

//parent.controller.js 
(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('ParentController', ParentController); 

    ParentController.$inject = ['$scope']; 

    function ParentController($scope) { 
     var vm = this; 
     console.log(this); 
     vm.test = {}; 
     vm.test.label = "This is being set in the parent controller."; 
    } 
})(); 

//child.controller.js 
(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('ChildController', ChildController); 

    ChildController.$inject = ['$scope']; 

    function ChildController($scope) { 
     var vm = this; 
     vm.test = vm.test; 
    } 
})(); 

HTML

<div ng-controller="ParentController as vm"> 
    <div>PARENT: {{vm.test.label}}</div> 
    <div ng-controller="ChildController as vm"> 
      <div>CHILD: {{vm.test.label}}</div> 
    </div> 
</div> 

結果

PARENT: 'This is being set in the parent controller.' 
CHILD: 

Answer 1

的問題是：虛擬機也是$範圍本身的一部分。因此，對於父控制器&，您不能具有相同的此實例。否則，您在使用它們時會遇到問題。 如果你想爲父母&孩子隔離此實例，則給出不同的名稱。 由於VM也是控制器的一部分，所以，如果你想訪問子控制器內家長的虛擬機，那麼你將不得不做$scope.vm

工作代碼按您的要求在下面附：

Controller 
--------- 
(function() { 
       'use strict'; 

    angular 
     .module('app', []) 
     .controller('ParentController', ParentController); 

    ParentController.$inject = ['$scope']; 

    function ParentController($scope) { 
     var vm = this; 
     console.log(this); 
     vm.test = {}; 
     vm.test.label = "This is being set in the parent controller."; 
    } 
})(); 

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('ChildController', ChildController); 

    ChildController.$inject = ['$scope']; 

    function ChildController($scope) { 
     var childVm = this; 
     childVm.test = $scope.vm.test; 
    } 
})(); 


HTML 
--- 

<div ng-app="app"> 
      <div ng-controller="ParentController as vm"> 
       <div>PARENT: {{vm.test.label}}</div> 
       <div ng-controller="ChildController as childVm"> 
        <div>CHILD: {{childVm.test.label}}</div> 
       </div> 
      </div> 
     </div> 

乾杯！

Answer 2

檢查plnkr後，希望我能理解你的問題，並給出答案此基礎上：

在控制文件中，ChildController

var childCtrl = this; 

// Why don't either of these work? 
// childCtrl.test = parentCtrl.test; 
// childCtrl.test = this.parentCtrl.test; 

• 分配parentCtrl.test，沒有按沒有任何意義，因爲它是父控制者的目標。
• this.parentCtrl.test將被評估爲無效的childCtrl.parentCtrl.test。

繼曾因爲 -

// But this does... 
childCtrl.test = $scope.parentCtrl.test; 

在代碼執行

• 兩個單獨的範圍將得到每個創建的用於ParentController和ChildController。

• 子將繼承父項的屬性，那些不存在於childController中的屬性將被分配給childController範圍。 由於您在哪裏能夠訪問範圍內的孩子的價值。