Question

我有一个控制器HomeworkPageController，我使用TopicService中的方法getAllMainTopics从MongoDB获取所有主题。 $ scope.topics然后用于显示所有主题。我有一个按钮打开一个模态，在MongoDB中添加一个新主题。模态使用另一个控制器AddTopicController。如何从AddTopicController中的HomeworkPageController更新$ scope.topics？我想这样做是因为在关闭模式后，应刷新所有主题的列表，它必须包含已添加的主题。我尝试在AddTopicController中使用HomeworkPageController，然后调用getAllMainTopics方法，但是html中的$ scope.topics没有更新。感谢。

这是HomeworkPageController：

app.controller('HomeworkPageController', ['$scope','TopicService',
 function ($scope, TopicService) {
     $scope.topics = [];
        $scope.getAllMainTopics = function () {
            TopicService.getAllMainTopics('homework')
                .success(function(data) {
                    $scope.topics = data;
        }
        $scope.addTopic = function () {
           ModalService.openModal({
              template: "templates/addTopic.html",
              controller: 'AddTopicController'
           });
      } 
]);

这是AddTopicController：

app.controller('AddTopicController', ['$scope','$controller', '$timeout','TopicService', '$modalInstance',
    function ($scope, $controller, $timeout,TopicService, $modalInstance) {
      var homeworkPageController = $scope.$new();
        $controller('HomeworkPageController',{$scope : homeworkPageController });
        $scope.save = function() {
            TopicService.saveTopic(data)
                .success(function(result){
                    homeworkPageController.getAllMainTopics();
                    $modalInstance.close();
                })   
     }
}]);

以下是我使用$ scope.topics的视图：

 <div class="homework-content-topic-list" ng-repeat="topic in topics">
    <label> {{ topic.subject }} </label>
 </div

Answer 1

您应该在服务中保留主题列表，然后将该服务注入两个控制器。这样，您就可以访问和更新两个控制器中的主题。它可能看起来像

app.controller('HomeworkPageController', ['$scope','TopicService',
function ($scope, TopicService) {
 $scope.topics = TopicService.topics;
 // Do stuff here
]);

然后你只需要修改你的TopicService，让它的方法适用于存储的对象。

Answer 2

你可以通过两种方法来解决这个问题

1）查看ui-bootstrap的website中给出的示例。他们给出了一个符合您要求的例子 - plunker。模态中有三个项目 - item1，item2，item3。如果您选择其中一个项目并单击“确定”，则所选项目将通过“解决方案”发送到主控制器。 $ scope.open函数中的属性。

2）您可以编写一个自定义服务，作为两个控制器的桥梁，您可以在服务中编写getter和setter方法。

angular.module('app').service('popupPageService', function() {

    var topics;

    var setDetails = function(param) {
        topics = param;
    };

    var getDetails = function() {
        return topics;
    };

    return {
        setDetails: setDetails,
        getDetails: getDetails,
    };
});

调用AddTopicController中的setDetails函数，当你退出模态时，通过推送新增值（getDetails）来更新HomeworkPageController中的$ scope.topics

从其他控制器更新ng-repeat中使用的$ scope变量

2 个答案: