Why doesn't 1-way binding work in angularjs?

Question

I'm having trouble using one way binding in directives with an isolate scope.

If I use an equal sign for two-way binding, and use the data like so: {{d.name}}, it works.

If I use an @ sign, it doesn't work. If I use an equal sign and use the data like so: {{::d.name}}, it fails also.

You can see my full example at this plunker: http://plnkr.co/edit/8bUl8pZSV8Ryru6GDq2M?p=preview

Can someone please help me understand what's happening here? Thanks.

The @ gives you one-way binding of a scope variable to the text of the attribute. The :: gives you one-time binding, which is something different. — Bennett McElwee
– Bennett McElwee, Commented Jul 6, 2015 at 23:15

pasine · Accepted Answer · 2014-11-02 22:22:37Z

3

The one-way binding syntax you are trying to use, has been introduced since Angular 1.3.
In your demo you are using version 1.2.25.
You must change the script link:

<script data-require="[email protected]" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.2.25"></script>

The problem with the second directive, instead, is that the @ is not a one-way binding, it simply takes the attribute as text.
To use it like you would, so you need to interpolate the text before passing it to the directive, like this

<h3>Directive 2</h3>
<p ng-repeat="d in data">
  <dir2 d="{{d.name}}"></dir2>
</p>

DEMO

edited Nov 2, 2014 at 22:22

answered Nov 2, 2014 at 21:50

pasine

11.6k10 gold badges53 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brent Over a year ago

You nailed it, thanks! Updating my Angular fixed the issue with the {{::d.name}} syntax. And the @ only passing a string makes sense, didn't know that's how it worked.

pasine Over a year ago

I suggest you to have a look at this link umur.io/…. It explains well how to use @,= and &.

Collectives™ on Stack Overflow

Why doesn't 1-way binding work in angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related