Menu
I need to change the templateURL according to screen resolution, For e.g. 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".
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 e.g. 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"
655
templateUrl can also be a function which returns the URL of an HTML template to be loaded and used for the directive. AngularJS will call the templateUrl function with two parameters: the element that the directive was called on, and an attr object associated with that element.
Restrict. Angular allows us to set a property named restrict on the object we return on our directive definition. We can pass through a string with certain letters letting Angular know how our directive can be used. function MyDirective() { return { restrict: 'E', template: '<div>Hello world!
replace: true means that the content of the directive template will replace the element that the directive is declared on, in this case the <div myd1> tag.
The ngRef attribute tells AngularJS to assign the controller of a component (or a directive) to the given property in the current scope. It is also possible to add the jqlite-wrapped DOM element to the scope. The ngRepeat directive instantiates a template once per item from a collection.
In your case you can listen window.onresize event and change some scope variable, which would control template url, for example in 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:
You can specify templateUrl as a string representing the URL or as a function which takes two arguments tElement and 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. I modified my answer to add injection and use $window.
UPDATE 2 The scope of the question has changed since I posted this answer. The answer you have accepted answers the current scope of the question.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
