javascript - 如何使 Angular 中的 ui-view 响应？

Question

在 Angular 中，我有一个带有垂直选项卡的嵌套 ui-view，在桌面上看起来像这样。

在移动设备上，只有列表应该以 100% 的宽度显示。

点击后，应该会显示内容，像这样。

我的问题是在 Angular 中执行此操作的最佳做​​法是什么？目前我正在使用 enquire.js 执行此操作，但这远非最佳。代码如下所示:

enquire.register("screen and (max-width: 480px)", {

match : function() {
    //FRANCHISE VIEW
    $( ".franchiseslide > a" ).click(function() {
        $(".franchiseselectlist").css('display','none');
        $(".franchisecontent").css('display', 'block');
        $(".franchisecontent").css('width', '100%');
        $(".viewback").css('visibility', 'visible');
    });

    $( ".viewback").click(function() {
        $(".franchiseselectlist").css('display','block');
        $(".franchisecontent").css('display', 'none');
        $(".viewback").css('visibility', 'hidden');
    });

},

我可以用 ui-router 或 ui-sref-active 解决这个问题吗？最理想的情况是，移动设备上的内容应通过动画滑入。实现 ngAnimate 的最佳方式是什么？

Answer 1

有两种基本方法可以让您的应用程序响应。

一种方法是使用浏览器代理字符串来确定设备类型并将用户重定向到适当的 View 类型。例如，在 Angular 中，您可以根据浏览器类型将用户重定向到不同的部分。

另一种方法是使用 css 媒体查询并根据设备上的可用空间以不同方式显示同一页面。如果您不想编写自己的媒体查询，可以将现有的 javascript 库(例如 bootstrap)合并到您的 Angularjs 应用程序中来处理此问题。