Binding value to child scope in angular js

Question

I have a directive that creates a row in a table. I then use ng-repeat to iterate over a list of items to populate the table with the directive row, e.g.:

<tr ng-repeat='item in items' rowItem='item' />

I am having a problem defining the scope. I can't use scope: false because that does not separate the rowItem values. I want to be able to bind to the rowItem value so using an isolated scope: scope:{rowItem: '='} which works as I want, but I still want the parent scope values to be accessible.

So the best choice would be scope: true however, I can't bind the scope to the row item. I tried using attrs.$observe('rowItem', ...) but this does not fire when the list of items changes because the rowItem is not an interpolated attribute.

Is there a way to use a new child scope (scope: true) that can bind to an attribute (like it does in the isolated scope)?

You observer like this scope.watch(attrs.rowItem,function) — Chandermani
– Chandermani, Commented Sep 26, 2013 at 15:59
Thanks, I have tried that but that works the same as attrs.$observe and only updates when the attribute value changes rather than the interpolated value changes. — Theo
– Theo, Commented Sep 26, 2013 at 17:16

Adam · Accepted Answer · 2013-09-26 16:21:06Z

2

I have created a working CodePen example that should give you the answer you are looking for.

The trick is using the scope.$eval(...) as I demonstrate in my example. I also want to point out that it seems you may be trying to misuse directives a little bit, but without knowing more about the exact requirements I am simply providing you an answer. You could probably complete your requirements without a custom directive based on the simplicity of the example you gave.

answered Sep 26, 2013 at 16:21

Adam

5,2464 gold badges23 silver badges18 bronze badges

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

1 Comment

Theo Over a year ago

Thanks for your answer, I was using $eval as well but I thought the observe was not being triggered when the item was changing. I created a fiddle to try to recreate the issue but it turns out that $observe is called when the item changes, but for some reason it is not for me.

zs2020 · Accepted Answer · 2013-09-26 16:10:36Z

0

$observe is not available in scope, it is available in attrs:

link: function(scope, elements, attrs){
    attrs.$observe('rowItem', ...)
}

answered Sep 26, 2013 at 16:10

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

1 Comment

Theo Over a year ago

Thanks, but that was just a typo.

Theo · Accepted Answer · 2013-09-27 08:47:44Z

0

I created a fiddle to try to replicate the issue but it appears the child scope (scope: true) is updating as regularly as the isolated scope. I must have another issue that is causing $observe not to fire as regularly.

answered Sep 27, 2013 at 8:47

Theo

1,26117 silver badges23 bronze badges

Collectives™ on Stack Overflow

Binding value to child scope in angular js

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related