Question

我们的客户想要一个响应迅速的网站，但他想改变并移动这么多内容，以至于我们会遇到引导限制。

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

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

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

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

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

Answer 2

我可能只是使用ng-if，但我确保你首先需要它，而不能简单地使用css / media查询你所描述的内容。这是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/

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

Answer 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文件作为模板

AngularJS模板切换

3 个答案: