根据屏幕大小更改视图

I am aware of a similar question being asked before:

我知道之前有过类似的问题:

Change the templateUrl of directive based on screen resolution AngularJS

根据屏幕分辨率AngularJS更改指令的templateUrl

This was first asked over a year ago and since then AngularJS got changed a bit. I am curious to find out if there are any other ways to achieve something similar as I haven't found many information about templateUrl swapping, so maybe I am barking up the wrong tree here.

这是一年前首次提出的问题,从那以后AngularJS发生了一些变化。我很想知道是否有其他方法可以实现类似的东西,因为我没有找到关于templateUrl交换的很多信息,所以也许我在这里咆哮错误的树。

I have a single page app without any routes.

我有一个没有任何路线的单页应用程序。

html:

<body ng-app="App">
  // lots of html same for both desktop/mobile
  <my-dir></my-dir>
  // even more here
</body>

template 1:

<p>Mobile</p>

template 2:

<p>Desktop</p>

I would like to render template 1 when the screen goes below 700px and template 2 otherwise. The templates change just what is inside my-dir directive. For example Template 1 renders list and template 2 renders table.

我希望在屏幕低于700px时渲染模板1,否则渲染模板2。模板改变了my-dir指令中的内容。例如,模板1呈现列表和模板2呈现表。

Another requirement would be to make it responsive if possible(aka templates would change as you resize the window)

另一个要求是尽可能使其响应(在调整窗口大小时,模板会发生变化)

At the moment I can use the solution from the above questions but are there any other ways to do it?

目前我可以使用上述问题的解决方案,但有没有其他方法可以做到这一点?

2 个解决方案

#1

In your controller:

在你的控制器中:

$scope.includeDesktopTemplate = false;
$scope.includeMobileTemplate = false; 
var screenWidth = $window.innerWidth;

if (screenWidth < 700){
    $scope.includeMobileTemplate = true;
}else{
    $scope.includeDesktopTemplate = true;
}

html template:

<body ng-app="App">
    <p ng-if="includeMobileTemplate">Mobile</p>
    <p ng-if="includeDesktopTemplate">Desktop</p>
</body>

Hope it helps

希望能帮助到你

#2

You can add window resize and scroll event listener on my-dir directive:

您可以在my-dir指令上添加窗口大小调整和滚动事件监听器:

angular.module("App").directive('myDir', ['$window', '$timeout', function($window, $timeout){

    return {
        restrict: 'EA',
        scope: {},
        template:'<div>
            <p ng-if="showFirstTemplate">Mobile</p>
            <p ng-if="showSecondTemplate">Desktop</p>
            </div>',
        link: function(scope, element, attr){

            function checkTemplateVisible(event){

                 //use $timeout to make sure $apply called in a time manner
                 $timeout(function(){

                      //pageYoffset is equal to window scroll top position
                      if($window.pageYOffset > 700){
                          scope.showFirstTemplate = true;
                          scope.showSecondTemplate = false;
                      }else{
                          scope.showFirstTemplate = false;
                          scope.showSecondTemplate = true;
                      }
                 })

            })

            //scroll event make sure checkTemplateVisible called on browser scrolling
            $window.on('scroll', checkTemplateVisible)

            //resize event make sure checkTemplateVisible called on browser resizing
            $window.on('resize', checkTemplateVisible)
        }
    }


}])

#1