I have been playing around with AngularJs for a couple of months now, and
love the framework.
I've mostly been toying around with the application, without any heavy
designs on the front end.
Right now, I'm trying to build out the UI for an admin panel, with a fixed
sidebar and header, I need the UI to be responsive, and i'm building it out
with bootstrap.
The fixed element pose an issue in that the rest of the content needs to be
aware of the width of the sidebar, for example, so that I can determine the
appropriate margin, unfortunately this won't be possible in CSS, so I need
to do this with angular.
I broke down my options like so:
option 1: I have a super parent directive (on the body, or my main
container element), that detects window resize, as well as breakpoints etc,
and broadcasts this information to element directives such as the side bar
and the main content.
option 2: I use a service to share the info among the directives, so my
main content knows my sidebar's width etc.
The problem with option one, is I can't tie the main content's margin to
the sidebar width directly, I basically have to write out a set of media
queries in JS that match those of the sidebar. The sidebar spans 3 columns
when on a large screen, and 2 columns when on a medium screen, so it's not
a fixed percentage. I will have to write out this logic again for the
margin - it's not much work, but doesn't feel very dry.
Option 2, sounds good in theory, but in practice I haven't been able to get
it to work, I'm putting it down to my lack of understanding of angular's
inner workings.
here is my attempt at option 2:
super parent:
adminLayoutDirectives.directive('viewFrame', [function($scope, $rootScope,
$timeout) {
return {
controller: function($scope, $element) {
var width = function() {
return $element.width();
}
var getBreakpoint = function() {
var windowWidth = window.innerWidth;
if(windowWidth < 768) {
return 'extra small';
} else if (windowWidth >= 768 && windowWidth < 992) {
return 'small';
} else if (windowWidth >= 992 && windowWidth < 1200) {
return 'medium';
} else if (windowWidth >= 1200) {
return 'large';
}
}
currentBreakpoint = getBreakpoint();
angular.element(window).bind('resize', function() {
var newBreakpoint = getBreakpoint();
var previousBreakpoint = null;
if (newBreakpoint != currentBreakpoint) {
previousBreakpoint = currentBreakpoint;
currentBreakpoint = newBreakpoint;
}
var currentWindowWidth = window.innerWidth;
$scope.$broadcast('windowResize', currentBreakpoint,
previousBreakpoint, currentWindowWidth);
});
}
}}]);
sidebar:
adminLayoutDirectives.directive('sidebar', ['Sidebar', function (Sidebar,
$timeout) {
return {
controller: function($scope, $element) {
console.log($element);
},
link: function(scope, element) {
scope.$on('windowResize', function(event, newBreakpoint,
previousBreakpoint) {
console.log(element);
newWidth = element.width();
console.log(newWidth + ' ' + Sidebar.currentWidth)
if (newWidth != Sidebar.currentWidth) {
console.log('changed')
Sidebar.currentWidth = newWidth;
}
});
}
}}]);
I tried putting the resize.on event in both the controller and the link. In
the controller, $element.width(), by itself, does return the correct width,
however when it's nested within the $on statement, it appears to always
return 0. In the link function, it seems to always return 0, in both cases.
Is there a way to get option2 working? is option 1 the way to go? Or am I
going the wrong way about it, what would option 3 be? Is there any
consensus on how to handle these kind of issues?
Thanks,
Will
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
