Necesito cambiar la plantilla URL según la resolución de la pantalla, por ejemplo si mi ancho de pantalla es inferior a 768 px, debe cargar "templates / browse-content-mobile.html" si es superior a 768 px, debe cargar "templates / browse-content.html".

Código utilizado actual.

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

Aquí estoy intentando con este código

 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
    }
});

Este bloque de código funciona, carga la página móvil y de escritorio de acuerdo con su resolución, pero cuando cambio el tamaño de la página, permanece igual ...

Por ej. si abro el navegador en la ventana de minimizar (480 px) y la maximizo a 1366 px, la templateUrl permanece igual que "/templates/browse-content-mobile.html '" debe ser "/templates/browse-content.html"

11
vs7 2 sep. 2014 a las 13:42

2 respuestas

La mejor respuesta

En su caso, puede escuchar el evento window.onresize y cambiar alguna variable de alcance, que controlaría la URL de la plantilla, por ejemplo, en 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';
                }
            }
        }
    }
});

Demostración: http://plnkr.co/edit/DhwxNkDhmnIpdrKg29ax?p=preview

9
dfsq 2 sep. 2014 a las 10:30

Del Documentación de directiva angular:

Puede especificar templateUrl como una cadena que representa la URL o como una función que toma dos argumentos tElement y tAttrs.

Por lo tanto, podría definir su directiva como

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'
             }
        }
    }
}]);

ACTUALIZADO: acabo de ver su actualización y creo que el problema podría ser que está utilizando el envoltorio $ window angular pero no lo está inyectando. Modifiqué mi respuesta para agregar inyección y usar $ window.

ACTUALIZACIÓN 2 El alcance de la pregunta ha cambiado desde que publiqué esta respuesta. La respuesta que ha aceptado responde al alcance actual de la pregunta.

6
Alic 28 jun. 2016 a las 20:01