controllerAs syntax name conflicts

[jusefb]

Hi,

Something I have discovered today with regards to the controllerAs syntax in Angualr 1. In my Angular 1 application I try to apply the component architecture by using directives to define individual components. The directive has its own controller with controllerAs: 'vm'. I also use angular-ui router for navigating between views. What I have discovered is that if I have a route defined with controllerAs: 'vm' and then I use a directive within the view that defines controllerAs: 'vm', the vm of the parent controller gets overwritten. The behaviour is the same even with isolated scope on the directive. If however I specify different names in the controllerAs parameter for router and the directive (ex controllerAs: 'componentVm') all works fine.

I was wondering if I am doing something wrong? If not and if this is the intended behaviour it would probably be a good idea to add something to the styleguide mentioning potential controllerAs name conflicts when using component architecture in Angular 1 with directive specific controllers.

Kind regards

Jusef

[kylecordes]

The style guide already says:

"Note: When working with larger codebases, using a more descriptive name can help ease cognitive overhead & searchability. Avoid overly verbose names that are cumbersome to type."

So I think @johnpapa has this covered well. Perhaps a slight improvement would be to mention that using nested controllers counts as "larger codebases".

(However... if you're building with well isolated components, you probably have few very explicitly nested controllers even in large projects.)

[zachlysobey]

That section of the style-guide is quite new, and probably could be expanded/improved a bit IMO.
See this conversation for more info: #462

[johnpapa]

Feel free to make a PR to add a short bit on nesting controllers, if you think it wil help

[josefromsanjose]

I'm a bit new to Angular and just transition from angular 1.4.8 to 1.5.0. I had the same problem, when nesting a directive. The parent directive would controllerAs property as 'vm' was overwritten by the child directive. adding an isolate scope to the child fixed the issue for me, but I can see where these can cause a problem.

[johnpapa]

Feel free to make a PR to add a short bit on nesting controllers, if you think it wil help

[karlhorky]

In my experience with naming Angular 1 controllers, out of the available options it makes the most sense to rename them after the component itself. This would only fall down with nesting of the same type of component inside one type, which in experience with a large app does not come up often.

[karlhorky]

So to clarify, I would suggest changing this rule in the style guide to recommend using the name of the component.

[johnpapa]

Use vm until it's not clear. Then use a more descriptive name.
That's what I like.

[paulashton]

I had the same issue as the one jusefb reported in November 2015. We had changed some directives to be controllerAs: 'vm'. In one case a controllerAs: 'vm' did not have an isolated scope (but in all other cases the controllerAs: 'vm' directives did have an isoloted scope). Adding scope: {}, to the one controllerAs: 'vm' directive that didn't have an isolated scope fixed the problem.