[英]Change the templateUrl of directive based on screen resolution AngularJS
I need to change the templateURL according to screen resolution, For eg if my screen width is less than 768px that it must load "templates/browse-content-mobile.html" if its greater than 768px it must load "templates/browse-content.html". 我需要根据屏幕分辨率更改templateURL,例如,如果我的屏幕宽度小于768px,它必须加载“templates / browse-content-mobile.html”,如果它大于768px则必须加载“templates / browse-content html的”。
Current used code . 当前使用的代码。
app.directive('browseContent', function() {
return {
restrict: 'E',
templateUrl: template_url + '/templates/browse-content.html'
}
});
Here i am trying with this code 在这里,我尝试使用此代码
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
}
});
This Code block is working, it loads the mobile and desktop page according to there resolution but when i resize the page it remain the same ... 此代码块正在运行,它根据分辨率加载移动和桌面页面但是当我调整页面大小时它保持不变...
For eg if I open the browser in minimize window (480px) and maximize it to 1366px the templateUrl remain same as "/templates/browse-content-mobile.html'" it must be "/templates/browse-content.html" 例如,如果我在最小化窗口(480px)中打开浏览器并将其最大化为1366px,则templateUrl保持与“/templates/browse-content-mobile.html”相同,它必须是“/templates/browse-content.html”
In your case you can listen window.onresize
event and change some scope variable, which would control template url, for example in ngInclude
. 在您的情况下,您可以监听
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';
}
}
}
}
});
From the Angular Directive Documentation : 来自Angular指令文档 :
You can specify templateUrl as a string representing the URL or as a function which takes two arguments tElement and tAttrs.
您可以将templateUrl指定为表示URL的字符串,或者指定为带有两个参数tElement和tAttrs的函数。
Therefore you could define your directive as 因此,您可以将指令定义为
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'
}
}
}
}]);
UPDATED: I just saw your update and I think the issue might be that you are using angular $window wrapper but not injecting it. 更新:我刚刚看到你的更新,我认为问题可能是你使用angular $ window包装但没有注入它。 I modified my answer to add injection and use $window.
我修改了我的答案添加注入并使用$ window。
UPDATE 2 The scope of the question has changed since I posted this answer. 更新2自我发布此答案以来,问题的范围已经改变。 The answer you have accepted answers the current scope of the question.
您接受的答案将回答当前问题的范围。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.