Angular-styleguide: bindToController vs scope angular v1.4

Created on 27 Jun 2015  ·  9Comments  ·  Source: johnpapa/angular-styleguide

Since angular v1.4 we can do this in a directive:

scope: {},
bindToController: {
    name: "="
}

Why would you use that instead of the "old" style?

scope: {
    name: "="
},
bindToController: true

The only answer I got was: intuitive, I agree, but is that all?
And what would the best practice be (also with angular2 in mind)?

Angular 1 enhancement help wanted

All 9 comments

With this you'd be able to bind specific scopes to the controller while keeping others isolated. In other words, it's not "all-or-nothing" anymore; you can pick and choose what values you need controlled.

[EDIT] The end of this article has a more verbose explanation, including code snippets.

The article to which @ledge23 refers is really good ... and particularly clear on this point in particular.

Yes, it is mainly the more intuitive way because we are explicit about which property names flow through to the directive controller (in the bindToController arg) and which flow through the isolated scope (in the scope property ... which is to say "none" in this example).

I don't know that I would use the ability that @ledge23 mentioned (new in v.1.4) to bind BOTH to properties of the controller instance (in the bindToController arg) and to a scope parameter injected into the controller (in scope); that's just too confusing for me.

I like where Pascal ends up. If you just want isolated scope and every binding goes straight through to the controller, I like

app.directive('someDirective', function () {
  return {
    scope: true
    bindToController: {
      someObject: '=',
      someString: '@',
      someExpr: '&'
    },
    ...
  };
});

I don't see that anything in this discussion bears on Angular 2. Maybe someone does.

It appears that this discussion has died down, but I'd like to resuscitate it.

I prefer this syntax:

scope: {},
bindToController: {
    name: "="
}

to this one:

scope: {
    name: "="
},
bindToController: true

I think it is a bit more intuitive, and helps promote iterative refactoring of "scope soup" code as proposed in the "Refactoring To Components" talk by Tero Parviainen

Any chance of updating the recommendations to use this style recommendation? I'm happy to create a PR if there is support for it.

@wardbell in your example with scope: true this is actually _not_ creating an isolated scope. This is just creating a new _child_ scope prototypically inheriting from its parent.

To create an _isolated_ scope you would need scope: {}

More conversation on this via this github/angular issue: https://github.com/angular/angular.js/issues/10007

It seems that Angular 1.5 will have a new .component() helper method to allow more concise element directive definitions.
https://github.com/angular/angular.js/commit/54e816552f20e198e14f849cdb2379fed8570c1a

This changes my opinion. I now think that the style-guide should remain as it is, until 1.5 drops, than include .component() as a good alternative for those on 1.5

@zachlysobey I agree!
@all thanks for the information!

@zachlysobey considering 1.4 is probably going to be the most popular version of angular for quite awhile yet, I think updating the 1.4 docs with a real example would be great. The only reference in the $compile doc for example is demonstrating bindToController: false case

I'm cool with having some PRs on 1.4 for things like bindToController

anyone want to make a PR?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Foxandxss picture Foxandxss  ·  13Comments

Bekt picture Bekt  ·  13Comments

sgbeal picture sgbeal  ·  7Comments

samithaf picture samithaf  ·  12Comments

majj picture majj  ·  4Comments