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

我需要根据屏幕分辨率更改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
    }
});

app.directive（'browseContent'，function（）{
屏幕宽度=window.innerWidth；
如果（屏幕宽度<768）{
加载_tempalte=template_url+'/templates/browse content mobile.html'；
}否则如果（屏幕宽度>=768）{
加载_tempalte=template_url+'/templates/browse content.html'；
}
返回{
限制：'E'，
templateUrl:load_tempalte
}
});

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

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

来自：

您可以将templateUrl指定为表示URL的字符串或 函数，该函数接受两个参数tElement和tAttrs

因此，您可以将指令定义为

app.directive('browseContent', ['$window', function($window) {
    return {
        restrict: 'E',
        templateUrl: function(tElement, tAttrs) {
             var width = $window.innerWidth;  //or some other test..
             if (width <= 768) {
                 return 'templates/browse-content-mobile.html';
             } else {
                 return '/templates/browse-content.html'
             }
        }
    }
}]);

app.directive（'browseContent'，['$window'，function（$window）{
返回{
限制：'E'，
templateUrl:函数（远程通讯、tAttrs）{
var width=$window.innerWidth；//或其他测试。。
if（width在您的例子中，您可以侦听
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';
                }
            }
        }
    }
});

app.directive（'browseContent'，函数（$window）{
返回{
限制：'E'，
模板：“”，
链接：功能（范围）{
$window.onresize=function（）{
changemplate（）；
作用域：$apply（）；
};
changemplate（）；
函数changemplate（）{
var screenWidth=$window.innerWidth；
如果（屏幕宽度<768）{
scope.templateUrl='browse content mobile.html'；
}否则如果（屏幕宽度>=768）{
scope.templateUrl='browse content.html'；
}
}
}
}
});

演示：我使用了window.innerWidth，它工作正常…您应该使用媒体查询来完成此任务。@dfsq不能使用.resize（）正如我们在jQuery中所做的那样…它与布局没有区别…否则我会使用css媒体查询…两个文件都有不同的功能和设计是的，在这种情况下媒体查询是不够的。请使用.resize事件检查我的答案。它似乎起作用了…我一次又一次地对每个调整角度的请求页面有一个疑问？我有同样的疑问。在Chrome中，resize只会启动一次，我不确定其他浏览器。我会在这里实施节流机制。如果发生这种情况，它会挂断浏览器…我也在Chrome和firefox中检查了一次它的唯一请求…我已与IE、Chrome和firefox检查过它的工作正常，并请求了一次谢谢buddy:）