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

【问题标题】：Update $scope variable that is used in ng-repeat, from other controller从其他控制器更新 ng-repeat 中使用的 $scope 变量
【发布时间】：2015-07-06 21:57:28
【问题描述】：

我有一个控制器 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

【问题讨论】：

标签： angularjs controller angularjs-scope ng-repeat

【解决方案1】：

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

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

然后你只需要修改你的 TopicService 让它的方法在存储的对象上工作。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：