AngularJS 模板切换

Question

我们的客户想要一个响应式网站，但他想要更改和移动太多内容，以至于我们会遇到引导限制。

使用 Bootstrap ，您可以显示和隐藏 block 并使用偏移量移动它们，但不知何故它有其局限性。要求苛刻的客户不会遵守此类限制，因此我们正在寻找其他选择。

为了避免创建重复内容并仍然能够提供移动/桌面体验，我们的团队想出了 AngularJS。

我们的 JSON 数据和 Angular Controller 可以保持不变，但我们只需要在移动设备/平板电脑/桌面设备上切换 View 。

是否有一个好的稳定解决方案来实现它？我们可以像通过调整浏览器大小来测试响应式设计一样测试它，还是用户代理检测是唯一的解决方案？这在测试期间会很痛苦，因为我们需要许多设备或模拟器来测试。

Answer 1

您可以为此创建自定义指令。

app.directive('responsiveTemplate', function() {
    return {
        restrict: 'E',
        template: '<ng-include src="template"></ng-include>',
        scope: true,
        link: function(scope, elem, attr) {
            var mobile = attr.mobile;
            var desktop = attr.desktop;
            scope.template = desktop;

            $(window).resize(function() {
                if (windowSizeIsDesktop() && scope.template != desktop) {
                    scope.template = desktop;
                    scope.$apply();
                }
                else if (windowSizeIsMobile() && scope.template != mobile) {
                    scope.template = mobile;
                    scope.$apply();
                }
            });
        }
    }
})

作为元素使用

<responsive-template desktop="desktop.html" mobile="mobile.html"></responsive-template>

我还没有定义 windowSize 函数，尽管它们实现起来很简单