當它在Angular中的childScope中發生更改時，如何更新parentScope數組？

Question

我有一個嵌套的子控制器

<div class='main' ng-controller='mainController'> 
    <div class='search' ng-controller='searchController'> 
     <input type='text' ng-model='keyword'> 
     <button ng-click='search(keyword)'>Search!</button 
    </div> 
</div> 

在我的主控制器主控制器，我試圖創建一個主要範圍的變量來存儲一個搜索的結果。

var app = angular.module('mapApp', []) 
    .controller('mainController', [ 
     '$scope', 
     '$searchFactory', 
     ($scope, searchFactory)=>{ 

      $scope.results = []; 

      $scope.$watchCollection('results', (newVal, oldVal)=>{ 
       console.log('results updated to, ', newVal); 
      }, true); 

     }]); 

然後我嘗試在我的孩子控制器更新主控制器的$scope.results變量。

app.controller('searchController', ['$scope', 'searchFactory', ($scope, searchFactory)=>{ 
     $scope.search = function(keyword, type){ 
      let request = { 
       location: $scope.location, 
       radius: '500', 
       type: type ? type : undefined, 
       keyword: keyword 
      }; 
      searchFactory.search(request, (result)=>{ 
       console.log('result from search was', result); 
       $scope.results = result; 
      }); 
     }; 
    }]); 

我$watch功能不被調用，我相信這是因爲$scope.results沒有被更新。我試過使用$watch函數的三種類型，如Angular Docs下的$ scope.watch深度部分所示。我讀this article關於切換到示波器的原型繼承樣式，但我不確定這是解決我的問題的最佳方法，因爲我不確定我是否正在走正確的道路。也許我應該使用事件發射器/廣播公司來取得我想要的效果？

我如何更新searchController的父範圍（mainController）一results變量，這樣我可以再擁有它通過searchController兄弟姐妹訪問？

編輯/解決所以，這是很奇怪，如果你能解釋一下爲什麼是這樣的情況下，金星爲您服務。

這裏是mainController當代碼不工作：

.controller('mainController', [ 
     '$scope', 
     'searchFactory', 
     ($scope,searchFactory)=>{ 
      $scope.searchData = {results:[]}; 

      $scope.setResults = function(newResults){ 
       $scope.searchData.results = newResults; 
       console.log('new results is', $scope.searchData.results); 
      }; 

      //this function doesn't invoke except on initiation 
      $scope.$watch('searchData.results', (newVal, oldVal)=>{ 
       console.log('results updated to, ', newVal); 
      }, true); 

     }]); 

這裏是mainController當代碼確實工作：

.controller('mainController', [ 
     '$scope', 
     'searchFactory', 
     ($scope,searchFactory)=>{ 
      $scope.searchData = {results:[]}; 

      //comment out the evil console log and... it works??!! 
      $scope.setResults = function(newResults){ 
       $scope.searchData.results = newResults; 
       //console.log('new results is', $scope.searchData.results); 
      }; 

      //this invokes now, because black magic? 
      $scope.$watch('searchData.results', (newVal, oldVal)=>{ 
       console.log('results updated to, ', newVal); 
      }, true); 

     }]); 

爲什麼...

Answer 1

使用$scope.results = result;在子作用域上設置了一個新的結果屬性，它隱藏了結果的原型父母的身份。

要解決這個問題，你可以使用一個對象來保存結果屬性：

$scope.searchData = {results: []}; 

$scope.$watchCollection('searchData.results', (newVal, oldVal)=>{ 
    console.log('results updated to, ', newVal); 
}, true); 

，然後只設置該屬性你的孩子控制器：

$scope.searchData.results = result;