On first observation, anytime you are using $watch you are going to get a
performance hit, especially since it must execute the function for each
digest cycle.
Generally, $watch is only needed for items on scope. If you did actually
have use for the window height on scope itself for ui binding, then you
could just bind it and $watch it without a function:
$scope.winStats = winStats;
$scope.$watch('winStats.height', function(){ ... })
But based on what I'm hearing, my opinion, $broadcast from $rootScope would
be the way to go here: only one binding to the resize event, that in turn
fires only one broadcast message to any active controllers/directives that
are listening with $on.
I have a few directives that bind the resize even to a function, and they
also unbind on $destroy. For me this is correct such that I do not need
something listening all the time... only when the directive is loaded that
needs it.
Lastly, for some reason I don't like that you have the resize event in a
service, but that's probably because I always handle any dom manipulation
and events only in directives. It can obviously work, the way you are
doing it and makes sense if you need it that often. Most existing
projects, like angular bootstrap, you'd find that it's bound and unbound
solely in each directive linking function, hence we don't typically see
this as a service.
On Monday, March 31, 2014 10:36:02 AM UTC-6, Olivier Clément wrote:
>
> Hi,
>
> I have a service that already binds to $window's Resize event, and I
> expose the Window's Height through the service
>
> I have multiple directives that need to do stuff when the window is
> resized, and I currently $watch(servc.winHeight) to do what I need
>
> I was wondering if this approach was actually better in term of
> performance, versus binding the resize event of the windows multiple times.
>
> basically it boils down to this:
>
> 1- (simplified code)
> angular.service('winStats', function($window) {
> var resizeHandler = function() {
> this.size = { height: $win.height()}
> }
> angular.element($window).bind('resize', resizeHandler);
> });
>
>
> Then from controllers or directives inject 'winStats', and watching like
> so (assume I need to do this in 3-5 different places/directives that serves
> different purposes):
>
> $scope.$on(function() { return winStats.height;}, function(height) { [...]
> });
>
>
> ----------------
>
> 2- from any directives I need the window's height, simply bind a new
> handler in them:
> angular.element($window).bind('resize', resizeHandler);
>
> ---------------
>
> 3- Or maybe leverage $rootScope.$broadcast from the Service (in option1)
> and doing $scope.$on from the directives?
>
>
>
>
>
>
>
> Thanks for your inputs
>
--
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/d/optout.
