javascript - 在 Angular 中的 Controller 之间绑定(bind)数据

Question

不确定我这样做是否正确。我有两个 Controller 。一人拉所有帖子。另一个给我垃圾箱中所有帖子的数量。目前它有效，但只有一种方式。如果我从垃圾箱中撤消帖子并将其放回到总体中，则计数会发生变化以反射(reflect)新的数字，但如果我将帖子发送到垃圾箱，则计数不会更新。

这是我的服务:

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

});

这是我的第一个 Controller :(该 Controller 提供所有帖子并具有垃圾箱功能)

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

});

这是我的第二个 Controller :(此 Controller 对垃圾桶中的帖子进行计数)

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

});

在 Controller 1中，trashPost函数是我尝试从 Controller 2更新totalTrashItems的地方

我知道我错过了一些小事。

更新

具有 Controller 和变量的 HTML:

<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

我看到你们那里有一个空服务。

无需深入了解当前代码。对于此上下文，我的 Controller 间通信解决方案是在 Post、Trash 和 UnTrash 事件上使用 $broadcast("customEventName")。

并且您的 PostController 和 TrashPostController 将使用 $on("customEventName", function(){ }) 订阅这些广播事件

所有数据的发布和销毁，甚至与服务器的通信都将使用一个 PostTrackingService 来维护。在这种情况下，如果您的 Controller 需要执行任何发布和跟踪的操作，则只需调用该服务即可。

我知道读起来有点长。我建议首先查看 html，然后了解这些 Controller 的工作原理，最后查看服务是如何定义的。如果您将此模式应用到您的代码中。您的问题将会得到解决。

这是代码。您还可以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>