Windows Phone的全景与AngularJS [英] Windows Phone Panorama with AngularJS

问题描述

我试图复制Windows Phone的UI在AngularJS应用程序。下面是一个例如一个什么样的Windows Phone的用户界面是什么样子。

I am trying to replicate the Windows Phone Ui in an AngularJS app. Here is an example of what a Windows Phone Ui looks like.

它一个有趣的事情是面板是无限滑动展示。您可以继续滑动，并最终回到了第一个面板。

One interesting thing about it is the panels are infinitely swipe-able. You can keep swiping and end up back at the first panel.

要实现无限轻扫，我重复第一和最后面板和前添加它们与原板这样后：

To achieve the infinite swipe, I duplicate the first and last panels and add them before and after the original panels like this:

如果您滑动到一个复制的面板（如3或1）：

If you swipe to a copied panel (like "3" or "1"):

您会被重定向到面板的各种刷卡结束后立即生效。这种情况发生，而用户甚至不知道，因为没有动画

you are redirected to the real panel immediately after the swipe finishes. This happens without the user even knowing because there is no animation.

问题是，面板可以有 NG-控制器， NG-重复，纳克模型，或任意数量的在其中创建范围的东西。当我重复标记一个新的范围，将创建开出等同于原来的，但并没有保持同步。如何保持面板数据同步？

The problem is that the panels can have ng-controller, ng-repeat, ng-model, or any number of things that create scope within them. When I duplicate the markup a new scope is created that starts out identical to the original but does not stay in sync. How do I keep the panel data in sync?

或者，有另一种方式来实现这一目标，不涉及重复的标记？

OR, is there another way to achieve this that does not involve duplicating markup?

1. 我有一个想法是移动DOM元素，而不是周围的复制。我注意到显著滞后与此策略，如果只有两个板，这打破了，因为非选择面板或者需要当前面板之前或之后可去。的这是因为感知性能损失的不能接受的我的


2. 另一种选择是延迟的面板内容的移动，直到滑动完成之后。你仍然会看到小组冠军，但直到完成刷卡内容是不可见的。然后，我能确定哪个面板现在是当前和动画从正确的方向在未来（取决于刷卡的方向）。


3. 第三个选项是使用空白面板的加载微调为复制或缓冲板。如果你刷到面板不是原件之一，你会看到加载微调的闪光，直到你被移动到实际的面板。

这些选项都不是理想的，所以我在寻找其他的想法。但是，如果没有任何好的选择，＃2好像对我来说最好的方案。

None of these options are ideal, so I'm looking for other ideas. But if there aren't any good options, #2 seems like the best plan to me.

推荐答案

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

This appears to be a question about sharing state between different instances of a controller (the 'real' 1 panel and the 'fake' "1" panel) and it has been asked before....

<一个href=\"http://stackoverflow.com/questions/15170464/i-have-two-divs-with-the-same-ng-controller-in-angularjs-how-can-i-make-them-sh\">I有两个div与AngularJS相同NG控制器，如何才能让他们共享信息？

我喜欢的答案提示共享实例之间状态的服务...

I like the answer suggesting a service to share state between instances...

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};
}]);

下面是一个演示的方式进行工作小提琴

Here is a working fiddle that demonstrates the approach

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

迈克尔

这篇关于Windows Phone的全景与AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！