Измените templateUrl директивы на основе разрешения экрана AngularJS
Мне нужно изменить шаблонURL в соответствии с разрешением экрана, например. если моя ширина экрана меньше 768 пикселей, она должна загружать "templates/browse-content-mobile.html", если она больше 768 пикселей, она должна загружать "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"
Ответы
Ответ 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';
}
}
}
}
});
Ответ 2
Из Angular Документация по директивам:
Вы можете указать 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'
}
}
}
}]);
ОБНОВЛЕНО: Я только что видел ваше обновление, и я думаю, что проблема может заключаться в том, что вы используете оболочку angular $window, но не вставляете ее. Я изменил свой ответ, чтобы добавить инъекцию и использовать окно $.
ОБНОВЛЕНИЕ 2 Сфера охвата вопроса изменилась с тех пор, как я опубликовал этот ответ. Ответ, который вы приняли, отвечает на текущую область вопроса.
