在angularjs中将当前列表从一个控制器更新到另一个控制器?

时间:2017-10-18 09:32:21

标签: angularjs

我在更新列表时遇到问题。我已尝试过rootcope和使用工厂,但它只是不会更新视图。相反,它保持不变。更新工作的唯一时间是列表为空以便开始,否则原始加载始终存在。感谢任何建议。

以下是我使用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);
        }
    }
})();

1 个答案:

答案 0 :(得分:0)

它不会起作用。无法知道您的控制器是否知道列表已更改。

<强>解决方案 使用事件广播。 从两个控制器广播或发出事件。并将其用作触发点。