带有AngularJS的Windows Phone Panorama

我试图在AngularJS应用程序中复制 Windows Phone Ui.这是Windows Phone Ui的 example.

无限滑动

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

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

如果您滑动到复制的面板(如“3”或“1”)：

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

问题

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

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

思路

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

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

这似乎是关于在控制器的不同实例之间共享状态的问题(‘真正的’1面板和’假’“1”面板)并且之前已经被问过….

I have two divs with the same ng-controller in AngularJS,how can I make them share information?

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

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

迈克尔