角绑定与数组中的存在，或，性能计算性质

Question

问题

我想知道是否有一种简洁、高效的方式将角视图绑定到数组中某个特定项的存在上。基本上，我在一页上有两个控制器。控制器A可以删除或添加由服务注入的数组中的项。当我删除或添加控制器A时，我希望注入相同服务的Controller更新它的视图。

龙虾的问题

说我在创建龙虾约会网站。我会有两种观点，并排：

• ，最热的龙虾视图，展示了海洋中最热龙虾的列表。如果这些龙虾中的任何一只碰巧是你的朋友，它的清单将被突出显示，并有一条信息说你是朋友。
• ，龙虾朋友视图，和最热的龙虾视图在同一个页面。如果我从龙虾朋友视图(即从lobsterFriend数组中删除龙虾)取消了龙虾，那么最热的龙虾视图应该相应更新，并停止突出显示未好友的龙虾。

我想要一种能处理大量龙虾的解决方案。

设置

免责声明:这个问题中的代码只是为了说明。我不是在为龙虾创建约会网站。

我有一个角度服务，我正在注入到两个控制器。服务返回一个对象数组。

lobsterFriendService**，管理龙虾朋友的服务：**

angular.module('lobsterDating')

.factory('lobsterFriendService', function($http) {
    return {
        // An array of lobsters
        lobsterFriends: $http.get('lobsterApi/lobsterFriends/'),

        addLobsterFriend: function (lobster) {
            this.lobsterFriends.push(lobster);
            $http.post('lobsterApi/lobsterFriends/', lobster);
        },

        deleteLobsterFriend: function (crustaceanId) {
            this.lobsterFriends = this.lobsterFriends.filter(function (lobster) { return lobster.id !== crustaceanId; });
            $http.delete('lobsterApi/lobsterFriends/', crustaceanId);
        }
    }
});

LobsterFriendsCtrl**，是朋友列表的控制器，注入了** lobsterFriendService**:**

angular.module('lobsterDating')

.controller('LobsterFriendsCtrl', ["lobsterFriendService", function(lobsterFriendService) {

    $scope.removeFriend = function (lobsterId) {
        lobsterFriendService.deleteLobsterFriend(lobsterId);
    }

}]);

HottestLobsterCtrl**，是最热龙虾页面的控制器：**

angular.module('lobsterDating')

.controller('HottestLobstersCtrl', ["lobsterFriendService", "hottestLobsters" function(lobsterFriendService, hottestLobsters) {
    $scope.model = {
        hottestLobsters: hottestLobsters
    };

    $scope.lobsterIsFriend = function (lobsterId) {
        return lobsterFriendService.lobsterFriends.contains(lobsterId);
    }

    $scope.addLobsterFriend = function (lobster) {
        lobsterFriendService.addLobsterFriend(lobster);
    }

}]);

hottestLobsters.html**，绑定到** HottestLobsterCtrl**:**的视图

<div ng-repeat="lobster in model.hottestLobsters">
    <div class="lobsterFriend" ng-if="lobsterIsFriend(lobster.id)">{{lobster.name}} is your friend ;)</div>
    <div class="twoClawsUp" ng-if="lobsterIsFriend(lobster.id)" ng-click="addLobsterFriend(lobster)">Two claws up for {{lobster.name}}!</div>
</div>

可能的解决办法

1. 在lobsterFriends数组上设置一个手表。当它更新时，我们可以更新HottestLobsterCtrl控制器上的一些属性，触发摘要等等。我认为这是相当昂贵的。
2. 每当龙虾成为朋友或取消朋友时，发出一个事件。如果可能的话，这是一条我想避免的路径，因为我已经在用实际的对象注入服务了。
3. 使用某种类型的帮助程序库来很好地处理计算的属性。
4. ？请帮帮忙？

Answer 1

您想要做的是将数据保存在一个obj/数组中，在更新时，只需更改该对象和数组的值，而不是保留两个数组。您可以将其看作是一个主数组。之所以这样做是因为obj/数组是通过引用传递的，因此，不管它们在哪个控制器中，它都是相同的数据。柱塞实例

service('dataHolder', function(){
  this.data = [{
    name : 'Joe',
    isFriend: false
  },
  {
    name : 'Michelle',
    isFriend: false
  },
  {
    name : 'Adam',
    isFriend: true
  },
  {
    name : 'West',
    isFriend: false
  }] 
})

在您的示例中，如果您找到了通过合并将hottestLobsters和LobsterFriends组合到单个对象中并通过属性控制它们的方法，那么就不需要进行任何监视或广播。这就像共享相同的范围。