当 parentScope 数组在 Angular 中的 childScope 发生变化时，如何更新它？

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 under the $scope.watch depths section. I read this article 所示，切换到范围的原型继承样式，但我不确定这是解决我的问题的最佳方法，因为我我不确定我走的路是否正确。也许我应该使用 event emitters/broadcasters 来达到我想要的效果？

如何更新 searchController 的父作用域 (mainController) 中的 results 变量，以便 searchController 的兄弟姐妹可以访问它？

EDIT/SOLVED所以，这真的很奇怪，如果你能解释为什么会这样，金星为你。

这是当代码不工作时的主控制器：

.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);

        }]);

当代码工作时，这是主控制器：

.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;

当 parentScope 数组在 Angular 中的 childScope 发生变化时，如何更新它？

How can I update a parentScope array when it changes in the childScope in Angular?

javascript

angularjs

angularjs-scope

angularjs-watch