問題
角度のあるビューを配列内の特定のアイテムの存在にバインドするためのきちんとした効率的な方法があるかどうか疑問に思っています。基本的に、1 つのページに 2 つのコントローラーがあります。コントローラー A は、サービスによって挿入された配列内の項目を削除または追加できます。コントローラー A から削除または追加を行うときに、同じサービスが注入されたコントローラー B のビューを更新する必要があります。
ロブスターの問題
ロブスターの出会い系サイトを作成しているとします。2 つのビューを並べて表示します。
最もホットなロブスター ビューには、海で最もホットなロブスターのリストが表示されます。これらのロブスターのいずれかがあなたの友達である場合、そのリスト項目が強調表示され、あなたが友達であることを示すメッセージが表示されます.
ロブスター フレンド ビューは、最もホットなロブスター ビューと同じページにあります。ロブスター フレンド ビューからロブスターをフレンド解除すると (つまり、
lobsterFriend配列からロブスターを削除する)、それに応じて最もホットなロブスター ビューが更新され、フレンド解除されたロブスターの強調表示が停止します。
多数のロブスターで機能するソリューションが必要です。
セットアップ
免責事項: この質問のコードは、説明のみを目的としています。ロブスターの出会い系サイトを実際に作成しているわけではありません。
2 つのコントローラーに挿入する角度付きサービスがあります。サービスはオブジェクトの配列を返します。
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>
可能な解決策
lobsterFriendsアレイにウォッチを設定します。更新すると、HottestLobsterCtrlコントローラーのプロパティを更新したり、ダイジェストをトリガーしたりできます。これはかなりコストがかかると思います。- ロブスターが友達になったり、友達から外れたりするたびに、イベントを発生させます。これは、実際のオブジェクトを使用してサービスを既に挿入しているため、可能であればダウンすることを避けたいパスです。
- 計算されたプロパティを適切に処理するヘルパー ライブラリを使用します。
- ???? 助けてください？