我试图在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
迈克尔
