带有 AngularJS 的 Windows Phone 全景图

Posted 2023-02-19

【中文标题】带有 AngularJS 的 Windows Phone 全景图

【英文标题】：Windows Phone Panorama with AngularJS

【发布时间】：2014-06-17 11:14:54

【问题描述】：

我正在尝试在 AngularJS 应用程序中复制 Windows Phone Ui。这是一个example 的 Windows Phone Ui 外观。

无限滑动

关于它的一个有趣的事情是面板可以无限滑动。您可以继续滑动并最终返回第一个面板。

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

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

滑动完成后，您会立即被重定向到真实面板。这发生在用户甚至不知道的情况下，因为没有动画。

问题

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

或者，是否有另一种不涉及复制标记的方法来实现这一点？

想法

我的一个想法是移动 DOM 元素而不是复制。我注意到这个策略有很大的滞后，如果只有两个面板，这会失败，因为未选择的面板要么需要在当前面板之前或之后。这对我来说是不可接受的，因为感知到的性能损失 另一个选项是将面板内容的移动延迟到滑动完成之后。您仍然会看到面板标题，但在您完成滑动之前内容将不可见。然后，我可以确定当前是哪个面板，并为其从正确的方向（取决于滑动的方向）进入动画。 第三个选项是使用带有加载微调器的空白面板作为“复制”或缓冲面板。如果您滑动到不是原始面板之一的面板，您会看到加载微调器的闪烁，直到您移动到实际面板。

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

【问题讨论】：

查看本教程，了解使用 ngTouch 的照片滑块：onehungrymind.com/… 在浏览器开发工具中打开元素检查器查看演示。请注意，DOM 中的元素不会重新排序或复制。只有位置通过 CSS 定位移入和移出可见框架。

换句话说，面板不必像您在问题中显示的那样存在于堆叠的水平行中。它们只需要在画布外的某个地方，但您可以使用动画让面板从左右滑入，使其看起来好像在屏幕外的一条线上。

这有点像想法#2，但我认为它可以在几个方面进行改进。首先，当前面板可以根据您的触摸移动（例如，如果您触摸并向左拖动 20px，则面板将向左移动 20px）。然后，当您通过阈值并释放时，它基本上会做同样的事情 - 弄清楚接下来是哪个面板以及它应该来自哪个方向，然后对其进入进行动画处理。这样做的缺点是您直到看到内容在你完成刷卡之后，但这可能只是一个必要的妥协。

我链接教程的目的是为了演示这个概念——你可以用你喜欢的任何改进来实现类似的东西。我不明白为什么在滑动完成之前您看不到内容。它没有理由不能在动画时保留在面板上。

显示您已有的代码。目前太模糊，难以想象

【参考方案1】：

这似乎是一个关于在控制器的不同实例（“真实”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

迈克尔