在 Angular 中的控制器之间绑定数据

bind data between controllers in Angular

本文关键字:之间 绑定 数据 控制器 Angular      更新时间:2023-09-26

不确定我是否正确执行此操作。我有两个控制器。一个拉所有帖子。另一个给了我垃圾桶里所有帖子的计数。它目前有效,但只有一种方式。如果我从垃圾桶中撤消帖子并将其放回人口中,则计数会更改以反映新数字,但是如果我将帖子发送到垃圾箱,则计数不会更新。

这是我的服务:

app.service('sharedProperties', 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;
            }
        });
    };
});

这是我的第二个控制器:(这个控制器计算垃圾桶中的帖子)

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

在控制器 1 中,垃圾发布功能是我尝试从控制器 2 更新总垃圾箱的地方

我知道这是我错过的小东西。

更新

具有控制器和变量的 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>

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

无需深入研究您当前的代码。对于此上下文,我的控制器间通信解决方案是在发布,垃圾箱和取消垃圾箱事件上$broadcast("customEventName")。

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

所有数据的发布和丢弃,甚至与服务器的通信都将使用一个PostTrackingService进行维护。在这种情况下,如果您的控制器需要执行任何发布和跟踪操作,则只需调用该服务。

我知道这有点长。我建议首先查看html,然后了解这些控制器的工作原理,最后查看如何定义服务。如果将此模式应用于代码。您的问题将得到解决。

这是代码。你也可以在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>