2017-08-31 82 views
0

AngularJS中可以嵌套控制器嗎?在嵌套控制器的情況下,$ scope對象是否在所有控制器之間共享。

的問題是: -

我可以訪問橫跨所有控制器的第一控制器$範圍值,但我不能讓第三控制器中的第二控制器範圍的對象。你可以在下面的代碼片段中運行並檢查它。

var app = angular.module("appTest",[]); 
 

 

 
    function Controller1($scope) { 
 
     $scope.text1= "text Sample 1" 
 
    } 
 

 
    function Controller2($scope) { 
 
     $scope.text2= "text sample 2" 
 
    } 
 
    
 
    function Controller3($scope) { 
 
     $scope.text3 = $scope.text1 + " And " + $scope.text2; 
 
    } 
 

 
    app.controller("Controller1",Controller1); 
 
    app.controller("Controller2",Controller2); 
 
    app.controller("Controller3",Controller3);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="appTest"> 
 
    <div ng-controller="Controller1"> 
 
     <div> 
 
     <h1> First Controller</h1> 
 
     First Controller Values is <b> {{text1}}</b> 
 
     </div> 
 
     <div ng-controller="Controller2"> 
 
     <h1> Second Controller</h1> 
 
     First Controller Values is <b> {{text1}}</b> 
 
     <br /> 
 
     Second controller value is <b> {{text2}}</b> 
 
     </div> 
 
     <div ng-controller="Controller3"> 
 
     <h1> Thired Controller</h1> 
 
     First Controller Values + Second controller value is <b> {{text3}}</b> 
 
     
 
     </div> 
 
    </div> 
 
    </body>

+0

https://github.com/angular/angular.js/wiki/Understanding-Scopes#user-content-ng-controller –

回答

2

是的,你可以在angularjs嵌套控制器。父控制器範圍將沿原型鏈繼承,所有子控制器都將訪問父範圍。

但我無法獲得第三個控制器中的第二個控制器作用域對象。

原因是你的第三個控制器是獨立於你的第二個控制器。您不能直接從另一個獨立控制器訪問$scope屬性。您可以將第三個控制器嵌套在第二個控制器中,或者使用服務共享數據(後者更受歡迎)。

var app = angular.module("appTest",[]); 
 

 

 
    function Controller1($scope) { 
 
     $scope.text1= "text Sample 1" 
 
    } 
 

 
    function Controller2($scope) { 
 
     $scope.text2= "text sample 2" 
 
     $scope.text1="text Sample 1 from controller 2";//this will be printed in controller 2 and if you want to access parent data, use $parent 
 
    } 
 
    
 
    function Controller3($scope) { 
 
     $scope.text3 = $scope.text1 + " And " + $scope.text2; 
 
    } 
 

 
    app.controller("Controller1",Controller1); 
 
    app.controller("Controller2",Controller2); 
 
    app.controller("Controller3",Controller3);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="appTest"> 
 
    <div ng-controller="Controller1"> 
 
     <div> 
 
      <h1> First Controller</h1> First Controller Values is <b> {{text1}}</b> </div> 
 
     <div ng-controller="Controller2"> 
 
      <h1> Second Controller</h1> First Controller Values is <b> {{$parent.text1}}</b> 
 
      First Controller's scope objects value in scond controller <b> {{text1}}</b> 
 
      <br /> Second controller value is <b> {{text2}}</b> 
 
      <div ng-controller="Controller3"> 
 
       <h1> Thired Controller</h1> First Controller Values + Second controller value is <b> {{text3}}</b> </div> 
 
     </div> 
 
    </div> 
 
</body>