Angular two way data binding not working

Question

Thank you all guys. I will now select one detailed answer and close this up.

see the code below, it's fairly straight forward

<tr ng-repeat="record in records track by record.id">
  <td><input type="checkbox"/></td>
  <td ng-repeat="(name, value) in record" ng-hide="name == 'id'">
    <portia-td value="{{value}}"></portia-td>
  </td>
</tr>

Here is the directive define

return {
  restrict: 'E',
  replace: true,
  transclude: true, 
  scope: {
    value: '=' 
  },

  controller: function($scope) {
    $scope.input = {show: false, value: $scope.value};
  },
  templateUrl: "td.html"
  }

Why this produce error? but when change the scope set back to '@', it works again.

value="value" instead of value="{{value}}" since you're binding to the model and not the interpolation of it. — ivarni
– ivarni, Commented Sep 4, 2014 at 13:10
thanks mate. you saved my day. but I have another question regarding the $watch. If I watched the "records" using Equality set to true. I change the "value" in the directive, seems like it's not notifying that "record" is changed in my recordCtrl. — castiel
– castiel, Commented Sep 4, 2014 at 13:23
"So I guess I should reuse the question to induce the new one.", no, don't do that. Now the answers posted to the previous question are showing as answers to the new question. The new question should be posted as a separate question and you should roll back the edits you made. — Samuel Neff
– Samuel Neff, Commented Sep 4, 2014 at 13:47
1) Set the old question back. 2) Accept one of the answers. 3) Create a new post with the new question. — bmleite
– bmleite, Commented Sep 4, 2014 at 13:52

bmleite · Accepted Answer · 2014-09-04 13:16:04Z

1

If you want a bi-directional data binding, you need to use the =. Like this:

scope: {
  value: '=' 
}

And on the HTML:

<portia-td value="value"></portia-td>

When you use "{{value}}", you are basically interpolating the value of the value property and passing it to the directive. This means angular will not be able to get the reference to create the bi-directional binding, all it will get is a value (string/number/etc...).

More info here.

answered Sep 4, 2014 at 13:16

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

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

Comments

digital illusion · Accepted Answer · 2014-09-04 13:28:38Z

1

if you need to change the model outside the directive scope, you have to use the getter-setter model option. Check the following link, there is an example to update a value directly in the controller, outside the scope.

https://docs.angularjs.org/api/ng/directive/ngModelOptions

answered Sep 4, 2014 at 13:28

digital illusion

4974 silver badges21 bronze badges

Comments

Samuel Neff · Accepted Answer · 2014-09-04 13:20:49Z

0

Don't use {{value}} when passing the value to the directive, that way you pass a reference and it's bi-directional.

Full plnkr example here: http://plnkr.co/edit/rvY9A0DOEZpOEwOoy3xN?p=preview

<portia-td value="value"></portia-td>

answered Sep 4, 2014 at 13:20

Samuel Neff

75.4k18 gold badges144 silver badges186 bronze badges

Collectives™ on Stack Overflow

Angular two way data binding not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related