clarify watcher recommendations about angular-styleguide HOT 12 CLOSED

👍

One of the downsides of using controller as is that I have to include the name of the parent scope in any nested controllers, if I am using $watch on a parent variable. This breaks modularity. For instance, $scope.$parent.ParentController.variable seems to be necessary. Do you know a way around this? Any more help here would be good.

from angular-styleguide.

If you are using the controller as syntax, you should be able to refer to the parent by name, no matter how deeply nested the child Controller.

So if $watching value from MainController as main in SubController ...

function SubController ($scope) {
  var vm = this;

  $scope.$watch('main.value', function () {
    // do stuff ...
  });
}

Should work as long as SubController is somewhere in MainController's child scope:

<div ng-controller="MainController as main">
  <div ng-controller="SubController as sub"></div>
</div>

Perhaps this is what John wants to clarify. When setting up $watchers you use the name given to the controller in the mark-up via controller as and not the variable name (e.g: vm) used in the controller definition (this confused me at first).

from angular-styleguide.

@whusterj Yeah, that makes sense. Specifically, I was referring to situations where I am using the SubController in multiple places, embedded within different MainControllers. In that case, I don't want to hardcode the name of the MainController into my $watch argument, but I don't have a way of getting it from child scope. The only way I've gotten to work around this so far is to use $broadcast, but I'm not sure if that is better practice or not.

from angular-styleguide.

Ah, I see now what you meant by 'modularity.' I'm having trouble imagining the exact use case. Specifically, is there a reason the watched variable couldn't reside in a stateful service?

To the broader question of when to use watch vs. pub/sub, I found this interesting: http://eburley.github.io/2013/01/31/angularjs-watch-pub-sub-best-practices.html

from angular-styleguide.

The exact use case is when I'm using a 3rd party directive that they wrote as a controller, aka, ui-bootstrap's datepicker, and I'm using two datepickers on the same page and need some gerryrigging to make the whole thing stand up.

There actually probably isn't a reason it can't be in a stateful service. I need to research those more, I'm not sure I'm actually using any. Got any good tips? Good article you just linked, thanks.

from angular-styleguide.

If its like a date range picker, did you consider creating a directive that wraps the 2 pickers?

I try to avoid pub/sub for replacements to binding. A service/factory could help, but I'd first look at binding on its own or a wrapped directive.

from angular-styleguide.

I did, but was hoping not to deviate too far from the angular-ui implementation. I guess that can't be helped here if I want to avoid pub/sub and follow this guide.

from angular-styleguide.

I'd like to see your code snippet if you can get it into a small repro that I can run.

However don't think of a guide as the only way . There are always exceptions. It's not rules, more like guidelines. :)

from angular-styleguide.

I'll see if I can do that, shouldn't be too hard.

Aye, poor choice of wording on my part there. Also, :pirate: should be an emoticon.

from angular-styleguide.

Haha. Glad you caught the Cap Barbosa reference. :)

Thanks. I'd like to see if I can better understand the issue and offer an option.

from angular-styleguide.

This should do it: https://github.com/RichardLitt/ui-bootstrap-datepicker-example

from angular-styleguide.

there is nothing concrete to add to the style guide, so i am closing this

from angular-styleguide.