2017-10-18 19 views
0

リストを更新する際に問題が発生しました。私はrootscopeとfactoryを使ってみましたが、ビューを更新しません。むしろそれは同じままです。更新プログラムが動作する唯一の時間は、リストが空の場合は最初の負荷が常に存在することです。提案を感謝してください。ここでangularjsのあるコントローラから別のコントローラへ現在のリストを更新しますか?

はrootscopeを使用して私の試みです:

rootscopeの代替categories.html

app.config(['$routeProvider', function($routeProvider){ 

       $routeProvider 
        .when('/',{ 
         replace:true, 
         templateUrl: 'views/questions.html', 
         controller: 'SiteController as vm' 
        }) 
        .when('/categories',{ 
         templateUrl: 'views/categories.html', 
         controller: 'CategoriesCtrl as cm' 
        }) 
        .when('/categories/:name*',{ 
         templateUrl: 'views/questions.html', 
         controller: 'SiteController as vm' 
        }) 

        .otherwise({ 
         redirectTo: '/' 
        }) 
      }]); 

index.htmlを

<div class="col-xs-12 col-sm-8 col-md-8" ng-view> 
       All views load here 
</div> 

questions.html

<table class="table table-questions"> 
     <thead> 
     </thead> 
     <tbody> 

<tr dir-paginate-start="q in vm.allquestions> 
      <td> 

       <a class="questionlinks" ng-click="vm.viewquestion(q.idquestion)> {{q.question}} </a><h4></h4>{{q.date }} 
      </td> 
      <td class="text-center"><span class="box box-blue"> {{q.clicks}} </span></td> 

     </tr > 
</tbody> 
    </table> 
<div class="wrapper content content-categories content-tags" id="categories_content"> 
    <h2>Categories</h2> 
    <div class="col-md-12"> 
     <ul class="list-tags" ng-repeat="c in cm.categories"> 
      <li><a ng-href="#/categories{{c.categoryurl}}" ng-click="cm.getCategoryQuestions(c.idcategory)">{{c.categoryname}}</a></li> 
     </ul> 
    </div> 
    <div class="col-md-12"> 
     <nav> 
     </nav> 
    </div> 
</div > 

今コントローラ SiteController

(function() { 
    'use strict'; 

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

    SiteController.$inject = ['$http','$route','$routeParams','$rootScope']; 

    function SiteController($http,$route,$routeParams,$rootScope) { 

     var vm = this; 
     vm.allquestions=[]; 

     vm.thequestions=thequestions; 

init(); 

     function init(){ 
      thequestions(); 
     } 

function thequestions() { 
      var url; 
      $rootScope.$on('updateQs',function(event, obj){ 

       url=obj; 
       $http.get(url).then(function (response) { 
        vm.allquestions=response.data; 
       }); 
      }); 
       $http.get("/getlatestquestions").then(function (response) { 
        vm.allquestions=response.data; 

       }); 
     } 
    } 
})(); 

カテゴリーコントローラ

(function() { 
    'use strict'; 

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

    CategoriesCtrl.$inject = ['$http','$rootScope']; 

    function CategoriesCtrl($http,$rootScope) { 

     var cm = this; 
     cm.categories=[]; 
     cm.categoryquestions=[]; 

     //CATEGORIES 
     cm.getCategories=getCategories; 
     cm.getCategoryQuestions= getCategoryQuestions; 

     init(); 

     function init(){ 
      getCategories(); 
     } 

     //CATEGORIES RELATED 
     function getCategories() { 
      var url="/getcategories"; 
      var categoryPromise=$http.get(url); 
      categoryPromise.then(function (response) { 
       cm.categories=response.data; 
      }) 
     } 

     function getCategoryQuestions(idcategory) { 
      var url="/getcategoryquestions"+idcategory; 
       $rootScope.$emit('updateQs',url); 
     } 
    } 
})(); 

工場の代替 を追加しました。このapp.configを下app.moduleファイル内

app.factory("newquestions", function() { 

       var questions = {}; 

       return { 
        setQs: function (value) { 
         questions = value; 
        }, 
        getQs: function() { 
         return questions; 
        } 
       }; 
      }); 

この

(function() { 
    'use strict'; 

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

    SiteController.$inject = ['$http','$route','$routeParams','newquestions']; 



    function SiteController($http,$route,$routeParams,newquestions) { 

     var vm = this; 
     vm.allquestions=[]; 

     vm.thequestions=thequestions; 

init(); 

     function init(){ 

     initial(); 
      thequestions(); 

     } 

function initial(){ 
      newquestions.setQs("/getlatestquestions"); 
     } 

     function thequestions() { 
      var url=newquestions.getQs(); 

      $http.get(url).then(function (response) { 
       vm.allquestions=response.data; 
      }); 
     } 
    } 
})(); 

このSiteController

でCategoriesController

(function() { 
    'use strict'; 

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

    CategoriesCtrl.$inject = ['$http','newquestions']; 

    function CategoriesCtrl($http,newquestions) { 

     var cm = this; 
     cm.categories=[]; 
     cm.categoryquestions=[]; 

     //CATEGORIES 
     cm.getCategories=getCategories; 
     cm.getCategoryQuestions= getCategoryQuestions; 

     init(); 
     function init(){ 
      getCategories(); 
     } 
     //CATEGORIES RELATED 
     function getCategories() { 
      var url="/getcategories"; 
      var categoryPromise=$http.get(url); 
      categoryPromise.then(function (response) { 
       cm.categories=response.data; 
      }) 
     } 
     function getCategoryQuestions(idcategory) { 
      var url="/getcategoryquestions"+idcategory; 
       newquestions.setQs(url); 
     } 
    } 
})(); 
+0

あなたが間違った方法でこれに近づいているような気がします。コントローラは、両方が同じ時間に**ページ上にある場合のみ**互いに通信することができます。一般的には、ページ遷移間でデータを保持するシングルトンであるサービスを使用するか、各遷移前にサーバーを更新するか、localstorage/cookieからデータ状態を格納および取得します。 – Claies

答えて

0

それは動作しません。リストが変更されたことを知るためにどちらのコントローラも知る方法はありません。

解決策 イベントブロードキャストを使用します。 2つのコントローラからブロードキャストまたはイベントを送信します。それをトリガーポイントとして使用します。

+0

その解決策の問題は、最初のコントローラが1つのビューの開始時にデータをロードする必要があることです。その後、2番目のコントローラはそのデータを更新する必要がありますが、同じビューで最初のコントローラを使用しているため、最初のデータも再度ロードされ、2番目のコントローラのデータは1秒間表示されてから置き換えられます。それは "何が最初に来たのか、鶏や卵"という問題のように感じます。問題は、2つのコントローラを使用して同じビューを操作しようとしていることだと思います。 –

関連する問題