2017-10-18 60 views
0

我在更新列表時遇到問題。我已經嘗試使用Rootcope和使用工廠,但它只是不更新​​視圖。相反,它仍然是一樣的。更新工作的唯一時間是如果列表是空的,否則始終存在原始加載。感謝任何建議。在angularjs中將當前列表從一個控制器更新到另一個控制器?

這裏使用rootscope我嘗試:

rootscope替代

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> 

categories.html

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

這SiteController

(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; 
      }); 
     } 
    } 
})(); 

這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/cookies存儲和檢索數據狀態。 – Claies

回答

0

這是行不通的。沒有辦法知道你的控制器知道列表已經改變。

解決方案 使用事件廣播。 從兩個控制器廣播或發出一個事件。並將其用作觸發點。

+0

該解決方案的問題在於,第一個控制器必須爲一個視圖啓動加載數據。然後第二個控制器不得不更新那些數據,但是由於我們在同一個視圖中使用第一個控制器,所以初始數據也會再次加載,第二個控制器數據在1秒內可見,然後被替換。這感覺就像「先發生什麼,雞還是雞蛋」類型的問題。我認爲問題是,即時通訊嘗試使用兩個控制器並操縱相同的視圖。 –

相關問題