Daten zwischen Controllern in Angular binden

Question

Nicht sicher, ob ich das richtig mache. Ich habe zwei Controller. Man zieht alle Beiträge. der andere gibt mir die Zählung aller Beiträge im Mülleimer. Es funktioniert derzeit aber nur in einer Richtung. Wenn ich einen Beitrag aus dem Papierkorb rückgängig mache und ihn wieder in die Population zurücklege, ändert sich die Anzahl entsprechend der neuen Nummer. Wenn ich jedoch einen Beitrag in den Papierkorb verschiebe, wird die Zählung nicht aktualisiert.

Hier ist mein Service:

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

}); 

Hier ist meine erste Controller: (Dieser Regler liefert alle Beiträge und hat die Müll-Funktion)

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; 
      } 
     }); 
    }; 

}); 

Hier ist meine zweite Controller ist: (dies Controller zählt die Posts im Papierkorb)

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; 
    }); 

}); 

Im Controller 1 die Funktion trashPost auf ist, wo ich versuche, totalTrashItems von Controller 2

zu aktualisieren Ich weiß, dass es etwas Kleines ist, das ich vermisse.

UPDATE

der HTML-Code, den Controller und Variable:

<div class="container"> 
     <div class="row" align="center"> 
      <div class="stats" ng-controller="postsTrashCtrl"><i class="fa fa-thumb-tack"></i> Total Posts (<span class="attendStat">{{ totalItems }}</span>)<span class="seperator">&nbsp;&nbsp;|&nbsp;&nbsp;</span><i class="fa fa-trash-o"></i> <a href="#/trash" id="trashCan" class="trashCan">Trash</a> (<span class="attendStat">{{totalTrashItems}}</span>)</div> 
     </div> 

Answer 1

ich sah, dass Sie dort einen leeren Service.

ohne zu tief in Ihrem aktuellen Code zu suchen. Meine Lösung für die Kommunikation zwischen Steuerungen für diesen Kontext wäre $ broadcast ("customEventName") für Post-, Trash- und Untrash-Ereignisse.

und Ihre Postcontroller und TrashPostController wird auf diese übertragen Ereignisse mit $ auf ("customEventName", function() {})

ganze Posting und dem Wegwerfen von Daten und sogar die Kommunikation subscribe mit Server ist mit einem PostTrackingService gepflegt werden. In diesem Fall wird Ihr Controller den Dienst einfach anrufen, wenn er etwas mit dem Posten und der Verfolgung durchführen muss.

Ich weiß, das ist ein bisschen zu lange durchlesen. Ich würde vorschlagen, zuerst auf den HTML-Code zu schauen, dann ein Licht zu bekommen, wie diese Controller funktionieren, und schließlich zu sehen, wie der Service definiert ist. Wenn Sie dieses Muster auf Ihren Code anwenden. Ihr Problem wird gelöst.

Hier ist der Code. Sie können auch play with it on JSFiddle

<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script> 
<div ng-app="myApp"> 

    <div ng-controller="PostController"> 
    {{postCount}} 
    <button ng-click="post()"> 
     Post 
    </button> 
    <button ng-click="trash()"> 
     Trash 
    </button> 
    </div> 

    <div ng-controller="TrashController"> 
    {{trashCount}} 
    <button ng-click="untrash()"> 
     UnTrash 
    </button> 
    </div> 

</div> 

<script> 

var app = angular.module('myApp', []); 

//----------------- Service to track all post changes --------------- 
app.factory('PostTrackingService', function($rootScope) { 
    var postCount = 10; 
    var trashCount = 3; 

    var _postTrackingService = {}; 

    _postTrackingService.getPostCount = function(){ return postCount}; 
    _postTrackingService.post = function(dataToPost){ 
    //do something with dataToPost 

    postCount++; 

    //broadcast a post event 
    $rootScope.$broadcast("A custom POST event invented by me"); 
    }; 

    _postTrackingService.getTrashCount = function(){ return trashCount}; 
    _postTrackingService.trash = function(postId){ 
    //do something with postId 

    trashCount++; 
    postCount--; 

    //broadcast a trash event 
    $rootScope.$broadcast("A custom TRASH event invented by me"); 
    }; 

    _postTrackingService.untrash = function(postId){ 
    //do something with postId 

    trashCount--; 
    postCount++; 

    //broadcast a trash event 
    $rootScope.$broadcast("A custom UNTRASH event invented by me"); 
    }; 

    return _postTrackingService; 
}); 



//----------------- Post Controller --------------- 
app.controller("PostController", ["PostTrackingService", "$scope", "$rootScope", function(PostTrackingService, $scope, $rootScope){ 
    $scope.postCount = PostTrackingService.getPostCount(); 

    $rootScope.$on("A custom POST event invented by me", function(){ 
    $scope.postCount = PostTrackingService.getPostCount(); 
    }); 

    $rootScope.$on("A custom TRASH event invented by me", function(){ 
    $scope.postCount = PostTrackingService.getPostCount(); 
    }); 

    $rootScope.$on("A custom UNTRASH event invented by me", function(){ 
    $scope.postCount = PostTrackingService.getPostCount(); 
    }); 

    $scope.post = function(){ 
    PostTrackingService.post("some data to post to server"); 
    } 

    $scope.trash = function(){ 
    PostTrackingService.trash("a post ID"); 
    } 

}]); 

//----------------- Trash Controller --------------- 
app.controller("TrashController", ["PostTrackingService", "$scope", "$rootScope", function(PostTrackingService, $scope, $rootScope){ 
    $scope.trashCount = PostTrackingService.getTrashCount(); 

    $rootScope.$on("A custom TRASH event invented by me", function(){ 
    $scope.trashCount = PostTrackingService.getTrashCount(); 
    }); 

    $rootScope.$on("A custom UNTRASH event invented by me", function(){ 
    $scope.trashCount = PostTrackingService.getTrashCount(); 
    }); 

    $scope.untrash = function(){ 
    PostTrackingService.untrash("some post id"); 
    //make any calls to inform server 
    } 

}]); 

</script>