带有AngularJS的Windows Phone Panorama

Question

我试图在AngularJS应用程序中复制Windows Phone Ui.以下是Windows Phone Ui 的示例.

无限滑动

一个有趣的事情是面板是无限可刷卡的.您可以继续滑动并在第一个面板上结束.

为了实现无限滑动,我复制了第一个和最后一个面板,并在原始面板之前和之后添加它们,如下所示:

如果您滑动到复制的面板(如"3"或"1"):

滑动完成后,您将立即重定向到真实面板.这种情况在用户不知道的情况下发生,因为没有动画.

问题

问题是,面板可以有ng-controller,ng-repeat,ng-model,或任意数量的在其中创建范围的事情.当我复制标记时,会创建一个与原始范围相同但不保持同步的新范围.如何保持面板数据同步？

或者,有没有另一种方法来实现这一点,不涉及重复标记？

思路

1. 我的一个想法是移动DOM元素而不是复制.我注意到这种策略存在显着的滞后现象,如果只有两个面板,这会导致故障,因为未选择的面板需要在当前面板之前或之后.由于感知到的性能损失,这对我来说是不可接受的
2. 另一种选择是延迟面板内容的移动,直到滑动完成为止.您仍会看到面板标题,但在完成滑动之前内容将不可见.然后,我可以确定哪个面板现在是当前的并且动画它从正确的方向进入(取决于滑动的方向).
3. 第三种选择是使用带有装载微调器的空白面板作为"复制"或缓冲面板.如果您滑动到不是原件之一的面板,您将看到加载微调器的闪光,直到您移动到实际面板.

这些选项都不是理想选择,所以我正在寻找其他想法.但如果没有任何好的选择,#2对我来说似乎是最好的计划.

Answer 1

这似乎是一个关于在控制器的不同实例之间共享状态的问题（“真实”1 面板和“假”“1”面板），之前已经被问过......

我在 AngularJS 中有两个具有相同 ng-controller 的 div，如何让它们共享信息？

我喜欢建议在实例之间共享状态的服务的答案......

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

app.service('myservice', function(){
    this.data = "Hi, I'm shared"
});

app.controller('mycontroller', ['$scope', 'myservice', function ($scope, myservice) {
    $scope.setData = function(newData){myservice.data = newData};
    $scope.getData = function(){return myservice.data};
}]);

这是一个演示该方法的工作小提琴

http://jsfiddle.net/michaeldausmann/WMPv3/#base

迈克尔