bind data between controllers in Angular

Question

Not sure if I am doing this correctly. I have two controllers. One pulls all posts. the other gives me the count of all the posts in the trash can. It currently works but only one way. If I undo a post from the trash can and put it back into the population the count changes to reflect the new number but if I send a post to the trash the count does not update.

Here is my Service:

app.service('sharedProperties', function () {

});

Here is my first controller: (This controller supplies all the posts and has the trash function)

app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data, $uibModal, sharedProperties) {
    Data.get('posts').then(function(data){
        $scope.posts = data.data;
        $scope.currentPage = 1; //current page
        $scope.filteredItems = $scope.posts.length; //Initially for no filter  
        $scope.totalItems = $scope.posts.length;
        $scope.list_pages = [
                {
                    id: '5',
                    name: '5'
                }, {
                    id: '10',
                    name: '10'
                }, {
                    id: '20',
                    name: '20'
                }, {
                    id: '50',
                    name: '50'
                }, {
                    id: '100',
                    name: '100'
                }
            ];
        $scope.maxSize = 5;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
    $scope.changePostStatus = function(post){
        post.approved = (post.approved=="1" ? "0" : "1");
        Data.put("posts/"+post.id,{approved:post.approved}).then(function (result) {
            Data.toast2(result);
        });
    };
    $scope.changePostAnnounce = function(post){
        post.announce = (post.announce=="1" ? "0" : "1");
        Data.put("posts/"+post.id,{announce:post.announce}).then(function (result) {
            Data.toast2(result);
        });
    };
    $scope.trashPost = function(post){
        if(confirm("Are you sure to remove the post")){
            Data.delete("posts/"+post.id).then(function(result){
                $scope.posts = _.without($scope.posts, _.findWhere($scope.posts, {id:post.id}));
                $scope.totalItems = $scope.posts.length;
                Data.toast(result);
            });
        }
    };
    $scope.open = function (p,size) {
        var modalInstance = $uibModal.open({
          templateUrl: 'views/postsEdit.html',
          controller: 'postsEditCtrl',
          size: size,
          resolve: {
            item: function () {
              return p;
            }
          }
        });
        modalInstance.result.then(function(selectedObject) {
            if(selectedObject.save == "insert"){
                $scope.posts.push(selectedObject);
                $scope.posts = $filter('orderBy')($scope.posts, 'id', 'reverse');
            }else if(selectedObject.save == "update"){
                p.title = selectedObject.title;
                // p.price = selectedObject.price;
                // p.stock = selectedObject.stock;
                // p.packing = selectedObject.packing;
            }
        });
    };

});

Here is my second controller: (this controller counts the posts in the trashcan)

app.controller('postsTrashCtrl', function ($scope, $log, $http, $timeout, Data, sharedProperties) {
    Data.get('trash').then(function(data){
        $scope.trash = data.data;
        $scope.totalTrashItems = $scope.trash.length;
    });

});

In controller 1 the trashPost function is where I am trying to update totalTrashItems from controller 2

I know it is something small that I am missing.

UPDATE

the HTML that has the controller and variable:


        
             Total Posts ({{ totalItems }})  |   Trash ({{totalTrashItems}})

Ji_in_coding · Accepted Answer

I saw that you have an empty service there.

without looking too deep into your current code. My solution for inter-controller communication for this context would be to $broadcast("customEventName") on Post, Trash and UnTrash events.

and your PostController and TrashPostController will subscribe to these broadcasted events using $on("customEventName", function(){ })

All the posting and trashing of data, and even communication with server is to be maintained using one PostTrackingService. In this case your controller will simply call the service if it need to perform anything with posting and tracking.

I know this is a bit lengthy to read through. I would suggest first look at the html, then get of a light of how those controllers work, and finally look at how the service is defined. If you apply this pattern to your code. your problem will be resolved.

Here is the code. You can also play with it on JSFiddle




  
    {{postCount}}
    
    
  

  
    {{trashCount}}

bind data between controllers in Angular

Answers (1)

Related Questions