0

ネストされた子コントローラーを持つメインコントローラーがあります

<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は、が更新されていないためだと思います。Angular Docsの$scope.watch depthsセクションに示されているように、3 種類の$watch関数を使用してみました。スコープのプロトタイプ継承スタイルへの切り替えに関するこの記事を読みましたが、正しい道を進んでいるかどうかわからないため、問題を解決する最善の方法であるかどうかはわかりません。おそらく、目的の効果を得るために、代わりにイベントエミッター/ブロードキャスターを使用する必要がありますか?

の親スコープ ( ) 内のresults変数を更新して、 の兄弟がアクセスできるようにするにはどうすればよいですか?searchControllermainControllersearchController

編集/解決済みしたがって、これは本当に奇妙です。なぜこれが当てはまるのかを説明できれば、金の星.

コードが機能しない場合の 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);

        }]);

どうして...

4

1 に答える 1

1

Using$scope.results = result;は、親の結果プロパティをシャドウする子スコープに新しい結果プロパティを設定します。

この問題を解決するには、オブジェクトを使用して results プロパティを保持します。

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

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

次に、子コントローラーでこのプロパティのみを設定します。

$scope.searchData.results = result;
于 2016-08-19T18:26:08.743 に答える