CODEWITHSUNDEEP
angularjscontrollerangularjs-scopeangularjs-ng-repeat
ThomasM
ThomasM

Reputation: 71

Update $scope variable that is used in ng-repeat, from other controller

I have a controller HomeworkPageController where I get all the topics from MongoDB using method getAllMainTopics from TopicService. $scope.topics is then used to show all topics. I have a button that open a modal where a new topic is add in MongoDB. The modal is using another controller AddTopicController. How can I update $scope.topics from HomeworkPageController in AddTopicController ? I want to do this because after I close the modal, the list of all topics should be refreshed, it must contain the topic that has been added. I tried to use HomeworkPageController in AddTopicController and then call the method getAllMainTopics but the $scope.topics from html is not updated. Thanks.

Here is 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'
           });
      } 
]);

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

Here is the view where I use $scope.topics:

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

Upvotes: 2

Views: 515

Answers (2)

akashrajkn
akashrajkn

Reputation: 2315

you can solve this by two methods

1)look at the example given in ui-bootstrap's website. They have given an example that will suit your requirement - plunker. There are three items in the modal - item1, item2, item3. If you select one of those items and click 'ok', the selected item is sent to the main controller through "resolve" attribute in the $scope.open function.

2)You can write a custom service that acts as a bridge to the two controllers and you can write getter and setter methods in the service.

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

    var topics;

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

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

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

call the setDetails function in the AddTopicController and once when you come out of the modal, update your $scope.topics in HomeworkPageController by pushing the new value added (getDetails)

Upvotes: 1

arafeek
arafeek

Reputation: 75

You should probably keep your list of topics in a service and then inject that service into both controllers. This way you would be able to access and update the topics in both of your controllers. It could look something like

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

Then you just need to modify your TopicService to have it's methods work on the stored object.

Upvotes: 1

Related Questions