Using Controllers In Directives In AngularJS

Posted February 1, 2013 at 5:46 PM by Ben Nadel

Tags: Javascript / DHTML

Reader Comments

All very cool Ben!
At twpm we've been using knockout.js for a few months now and are blown away with it. The syntax is very elegant and intuitive. Have you look into it?

@Topper,

I can't say that I've really given it much of a look; but, I have heard a number of people sing it's praises. From some quick Googling, it looks like they have a number of similar philosophies.

Hi Ben, first let me say thank you very much for these posts on Angular. I have just started with the framework and reading your articles has helped.

I am still very confused with directive controllers, however. In particular I am still not clear on exactly what scopes/controllers are being fetched with the

line in the slave directive. Is the slave getting the master's directive controller or the master-controller? I also found it interesting that removing the

from the master directive seemed to make no difference to the behaviour of the program whatsoever. Interesting but also confusing :)

I am trying to draw a dependency diagram for your program but still not 100% sure on the links between the six things: two regular controllers, two directive controllers and the directives themselves.

All the best,
Chad.

@Chad,

I'm glad that you're finding these posts useful! AngularJS had / has a steep learning curve for me, so I'm thrilled that sharing some of the trickier concepts is helpful.

When a Directive requires a Controller, it is only requiring a "directive controller". The directive doesn't have any access to the ngController-based controllers. The only thing that a directive and an ngController has is that they share (or at least share by default) the same $scope reference. The $scope is the way a directive can interact with the ngController controller.

I am surprised that removing "require: bnMaster" allowed the program to continue to run. I would think that would render the "controller" argument passed to the bnMaster link() function to be undefined... maybe a directive always receives its own controller if it is defined?? Not really sure :)

I hope that helps clear it up a bit. I know the terminology is confusing with the various "controller" types being talked about.

. From the code above, i was of the thought that the master canvas element will be having a css class called 'bnMaster', but i could not find such a class in it. What does 'mousedown.bnMaster' refers to and how does that differ from 'mousedown'. I have the same doubt for the slaves controller as well. Searching in google gave me only the 'mousedown', 'mouseup' things. Could you pls. explain?

@Rajkamal,

The ".bnMaster" is a "namespace" for the event binding. This is a core feature of the jQuery event publish/subscribe mechanism and is not specific to AngularJS is anyway.

The namespace allows for events to be unbound without the reference to the original function reference.

Imagine that I had an element that had several different event bindings of the same event type:

A.on( "click", handlerA );
A.on( "click.bThing", handlerB );
A.on( "click", handlerC );

With this configuration, imagine that you wanted to unbind ONLY the handlerB subscriber. Since it has a ".bThing" namespace, all you have to do is:

A.off( "click.bThing" )

This will unbind the handlerB, while leaving the other 2 event handlers in place.

Now, imagine you wanted to unsubscribe the handlerC? It has no namespace. As such, you canNOT just call A.off( "click" ) as this will unbind the other two event handlers as well. What you would have to do is call off() with the original handler reference:

A.off( "click", handlerC );

This is the only way you can unbind the non-namespace event type without accidentally unbind all the other click handlers on the same element.

Here is a quote from the http://api.jquery.com/off/ page:

If a simple event name such as "click" is provided, all events of that type (both direct and delegated) are removed from the elements in the jQuery set. When writing code that will be used as a plugin, or simply when working with a large code base, best practice is to attach and remove events using namespaces so that the code will not inadvertently remove event handlers attached by other code. All events of all types in a specific namespace can be removed from an element by providing just a namespace, such as ".myPlugin". At minimum, either a namespace or event name must be provided.

Hope that helps a bit :)

Hi Ben,

Love these tutorials. Quick question: Did you try a version where all the numbers updated constantly during mouse move, as opposed to only updating on mouse up? You mentioned performance considerations, but, if you think about it, that kind of updating really shouldn't be too resource intensive. If it is, it makes me hesitant to use angular for anything that requires much animation.

As an example, d3.js could handle that kind of updating quite easily on its own. Is the angular engine doing things in an inefficient way?

Thanks for any thoughts on this...

@Jonah,

I don't think there's a definitive answer for that - it's going to depend on how "expensive" your digest cycles are. That's one thing that you really have to wrap your head around when it comes to AngularJS and "dirty checking."

Right now, the page is a just a white-page example, so you are probably correct - updating the values on every mouse-move using the AngularJS data binding probably wouldn't be a problem. But, since AngularJS using dirty checking (as opposed to "observers"), you can't localize your changes.

By that, I mean that there is no way to say to AngularJS, "Apply the digest to this set of variables, but NOT to these other set of variables." It's and all or nothing approach. That means that for every mouse move that forces the $digest to update the bindings, AngularJS is going to re-test ALL data bindings currently be rendering on the page.

To give that some context, look at my ngRepeat statement:

Now, imagine that I was actually using a Filter in that ngRepeat:

Here, I'm using the built-in filter ( http://docs.angularjs.org/api/ng.filter:limitTo ) to make sure that my slaves array never exceeds 5 in length.

Ok, now, going back to the $digest concept, if I have to trigger a $digest on every mouse move, that filter will ALSO get re-executed for every mouse move. This is because, for every single digest, AngularJS has to check the slaves array and re-apply the filter to make sure that nothing has changed.

The more data bindings, the more expensive this can become.

Now, JavaScript can do a boat load of calculations in a short time - I think the AngularJS team says that anything below 20,000 JavaScript operations a second shouldn't be noticeable. But, the more bindings with things like filters, the faster this tipping point is reached.

So, going back to your question, there's nothing inherently good or bad about updating the values with each mouse move using AngularJS - it depends on how much work each $digest has to do.

Hope that helps clarify the thinking - hope I didn't ramble too much :)

@Ben,

If by "ramble" you mean "produce the most thorough response I've seen in all my years replying to blog posts," the yes :)

I couldn't have hoped for a better answer, and really appreciate your taking the time to write it up.

It sounds like the standard premature optimization advice might be applicable to Angular as well: Just use angular as you want to until you see performance degrade, and then worry about hacking around it.

In this case, "hacking around it" might mean moving the code that updates the coordinates as the mouse moves outside the angular lifecycle -- eg, using d3 drag events instead of watching for changes with angular. You obviously lose the cleanliness of having everything within the angular system, but it seems like a decent workaround for cases where it's needed, right?

Thanks again for the great answer,
Jonah

@Jonah,

Ha ha, thanks :) Glad it was helpful then!

I think you're right about premature optimization. In general, I just go with the flow in an AngularJS application. That said, drag-n-drop is something that I have actually seen cause some issues with "choppiness" of the drag animation. But, this was in a context that had a ton of filters being fired on every $digest.

We've been slowly refactoring the way some of the problematic UI was built. If there weren't so many filters, then the drag-n-drop may have never been symptomatic.

@Ben,

Thanks again. Just as a slightly OT addendum, in case you (or anyone reading this) uses d3, you actually have to be a little careful even there to get good performance on drag events.

In particular, some of the examples I've come across have you using d3.select(this) within the listener function, but that can be a CPU hog. I've been instead creating a separate function for each element's listener (via a factory function), and the CPU usage is about 1/2 to 1/3 of the d3.select(this) method, presumably because an expensive object creation (creation of the selection) is avoided.

hi, i am new to this angularjs, may i know how many ways we can define application module?
1>var myApp = angular.module('myApp',[]);
myApp.config(....)
myApp.directive(---)
2> (function( ng ) {

"use strict";

// Define our AngularJS application module.
window.demo = ng.module( "Demo", [] );

})( angular );
3>angular.module('myApp',[]).
directive('directiveName',function(){})
-------------------------------
1st and 3rd are similar,almost same, but 2nd is the code you have written in main.js file. It seems like jquery representation, may i know what is the difference between 1st and 2nd??

Are there any other ways to define application module?

@Jonah,

Sounds cool. I've not played with D3 myself, but I just looked it up and the examples look awesome!!

@Shanthi,

I think all of those examples are doing the same thing. You have to call:

angular.module()

... in order to define your AngularJS module. The only difference between those three examples is where you're storing the module reference; and, whether or not you are creating an alias for the "angular" object.

Hi ben, thanks for the quick reply, yeah am seeing all parts, it is different way of representation, but the purpose is same! In angular, people using different types of representations, so getting confused some times!! By the way, i like the name Ben :)

@Shanthi,

Ha ha, thanks, I like Ben too :)

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment