Angularjs literal two-way binding

Question

Is it possible to establish a two-way binding between parent scope and my directive's isolated scope, but without passing it through my directive's attributes?

'=' establishes a two-way, but not literal binding: instead of taking a specified value from the parent's scope directly, it looks for directive's attribute with a such name, then evaluates it, then uses a resulting value as a parent scope variable name.

'@' establishes a literal binding just as I want, but only one-way.

I've also tried '=@' in a hope that Angular.js is clever enough to understand that, but no luck.

I know that I can also use non-isolated scope (scope:true), but inside my code I'm using some techniques that necesarilly require an isolated scope.

Is there some way to do what I want?

Ilya Lakhin · Accepted Answer · 2017-04-13 11:14:08Z

Passing a model through the scope between Directive and State considered as a bad practice because it violates Loose Coupling design principal. Means that it potentially makes Directives lesser reusable, have side effects in the scope, and introduces unclear behavior. The same reasons are true when we are talking about the global state in JavaScript which considered as a bad practice too(but still available for some rare and specific cases).

I would recommend to take a closer look in one-way bound @ attributes, though. Because, actually, they provide a way to pass values forward and backward as well keeping the control on the Directive side. Don't be confused with the terms :)

// in directive
var theValueReturnsByController = scope.myOneWayAttr({theValuePassedToController: 1});

alert(theValueReturnsByController === 2);

// in controller
scope.oneWayAttrHandler = function(theValueReceivedFromDirective) {
  theValueReturnedToDirective = theValueReceivedFromDirective + 1;
  return theValueReturnedToDirective;
};

In template:

<my-directive my-one-way-attr="oneWayAttrHandler(theValuePassedToController)"></my-directive>

Florian Popa · Accepted Answer · 2017-04-13 09:14:35Z

1

It would be a bad design if you could call it directly. Why not pass it through bindings? You explicitly use that method.

answered Apr 13, 2017 at 9:14

Florian Popa

113 bronze badges

1 Comment

vdudouyt Over a year ago

I expected that somebody will say tha. Well, here is an answer: because this will end up in writing redundant boilerplate code. If Angular.js authors considered that as non-angularish practice, I guess that they didn't left an option to use non-isolated scoping at all.

Collectives™ on Stack Overflow

Angularjs literal two-way binding

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related