3

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

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

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

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

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

4

3 回答 3

2

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

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

于 2014-09-17T14:40:58.053 回答
1 
$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 文件

于 2014-09-24T11:35:17.133 回答
1

我可能会为此使用 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/

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

于 2014-09-17T15:00:22.070 回答