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

Question

我需要根据屏幕分辨率更改templateURL，例如，如果我的屏幕宽度小于768px，则必须加载“ templates / browse-content-
mobile.html”；如果屏幕宽度大于768px，则必须加载“ templates / browse-content” .html”。

当前使用的代码。

app.directive('browseContent', function() {
    return {
        restrict: 'E',
        templateUrl: template_url + '/templates/browse-content.html'
    }
});

在这里我正在尝试此代码

 app.directive('browseContent', function() {
    screen_width = window.innerWidth;
    if (screen_width < 768) {
        load_tempalte = template_url + '/templates/browse-content-mobile.html';
    } else if (screen_width >= 768) {
        load_tempalte = template_url + '/templates/browse-content.html';
    }
    return {
        restrict: 'E',
        templateUrl: load_tempalte
    }
});

此代码块正常工作，它根据那里的分辨率加载移动和桌面页面，但是当我调整页面大小时，它保持不变…

例如，如果我在最小化窗口（480px）中打开浏览器并将其最大化为1366px，则templateUrl与“ /templates/browse-
content-mobile.html’”相同，它必须为“ /templates/browse-content.html”

Answer 1

在您的情况下，您可以侦听window.onresize事件并更改一些范围变量，这些变量将控制模板url，例如在中ngInclude。

app.directive('browseContent', function($window) {
    return {
        restrict: 'E',
        template: '<div ng-include="templateUrl"></div>',
        link: function(scope) {

            $window.onresize = function() {
                changeTemplate();
                scope.$apply();
            };
            changeTemplate();

            function changeTemplate() {
                var screenWidth = $window.innerWidth;
                if (screenWidth < 768) {
                    scope.templateUrl = 'browse-content-mobile.html';
                } else if (screenWidth >= 768) {
                    scope.templateUrl = 'browse-content.html';
                }
            }
        }
    }
});

演示：http：//plnkr.co/edit/DhwxNkDhmnIpdrKg29ax？p
= preview