Измените templateUrl директивы в зависимости от разрешения экрана AngularJS

Мне нужно изменить templateURL в соответствии с разрешением экрана. Например, если ширина моего экрана меньше 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"

Источник

2 ответа

Решение

В вашем случае вы можете слушать 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

Источник

Из угловой директивной документации:

Вы можете указать 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'
             }
        }
    }
}]);

ОБНОВЛЕНО: Я только что видел ваше обновление и думаю, что проблема может заключаться в том, что вы используете угловую оболочку $window, но не внедряете ее. Я изменил свой ответ, чтобы добавить инъекцию и использовать $window.

ОБНОВЛЕНИЕ 2 Объем вопроса изменился, так как я отправил этот ответ. Ответ, который вы приняли, отвечает текущему объему вопроса.

Источник
Другие вопросы по тегам