AngularJS 模板切换答案

【问题标题】：AngularJS template switchingAngularJS 模板切换
【发布时间】：2014-09-17 14:27:04
【问题描述】：

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

使用引导程序，您可以显示和隐藏块并使用偏移量移动它们，但不知何故它有其局限性。这是一个要求严格的客户，不会尊重这些限制，因此我们正在寻找其他选择。

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

我们的 JSON 数据和 Angular 控制器可以保持不变，但我们只需要在移动/平板/桌面上切换视图。

是否有一个很好的稳定解决方案来让它工作？我们是否可以像通过调整浏览器大小来测试响应式设计一样对其进行测试，或者用户代理检测是唯一的解决方案吗？这在测试过程中会很痛苦，因为我们需要很多设备或模拟器来进行测试。

【问题讨论】：

标签： angularjs adaptive-design

【解决方案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 函数，尽管它们实现起来很简单

【讨论】：

【解决方案2】：

我可能只是为此使用 ng-if，但我会确保您首先需要它，并且不能简单地使用 css / 媒体查询来描述您所描述的内容。以下是 ng-if 逻辑的示例：

<body ng-app="myApp"> 
   <div ng-controller="ctrl" >
      <div ng-if="isWide()">
         <p>Wide Content</p>
      </div>
      <div ng-if="!isWide()">
          <p>Narrow Content</p>
      </div>
   </div>
</body>

还有js：

angular.module('myApp', []).controller('ctrl', function($scope, $window) {    
   $scope.isWide = function() {
        return $window.innerWidth > 500; //your breakpoint here.
   }

   angular.element($window).on('resize', angular.bind($scope, $scope.$apply));
});

http://jsfiddle.net/gq2obdcq/8/

只需拖动拆分窗格即可查看小提琴中的结果。

【讨论】：

谢谢，几乎是我们正在寻找的。但不是真正分离的模板。可能 BackboneJS 是一个更好的选择？ “Angular 使用视图来派生行为，而 Backbone 使用行为来驱动视图”
我不认为这是关于角度的真实陈述。我也不太明白它与您的问题有何关系。也许如果您使用一些代码示例更新您的问题，我可以帮助您获得更好的解决方案。我不建议为（我认为）您所描述的问题选择新技术，除非您在该技术方面有更多经验......
我们希望避免在一个视图中混合移动和桌面内容块。您的
容器保持在同一位置。无论您使用什么设备。移动和桌面模板在块顺序上完全不同，因此切换到全新的视图文件会更好。
在黑暗中拍摄，因为我仍然不清楚你在追求什么，但我已经更新了 jsfiddle：jsfiddle.net/gq2obdcq/15 - 如果你'，你可以将 ng-controller 移动到 body 标签重新寻找摆脱该 div，您可以在 ng-include 中定义不同的视图，同时使用 ng-if。在这一点上，它与下面的解决方案非常相似，但是对于移动/桌面来说，你有完全不同的路线，我认为这是 SEO 的噩梦
您也可以使用 matchMedia (developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia)，它类似于 javascript 的 css 媒体查询。这样，您就不必绑定到 resize 事件。

【解决方案3】：

$routeProvider.
 when('/:menu/:page', {
     controller:HandleCtrl,
     template:'<div ng-include="templateUrl">Loading...</div>'
 }).

结合：

function HandleCtrl($scope, $routeParams){
 $scope.templateUrl = $routeParams.menu +'/'+ $routeParams.page + '.html'
}

这会安全吗？在控制器内部，我可以决定要用作模板的 html 文件

【讨论】：