CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
toonevdb
toonevdb

Reputation: 339

Angularjs directive 2 way binding not working + delay issue

I'm having the following problem. I have a search.js controller which uses a template results.html. That template uses a category directive to show all categories that any of the company products might have (as a sidebar). It also uses multiple product carousel directives to show the products of each matching company.

In my search.js controller I define a scope variable named filterCategoryId which starts at null. This variable is bound to the categories directive as well as all product carousel directives. Which makes me expect that a change to this variable in either any of the directives as well as in the search.js controller would propagate to all others using this variable. The variable is used to limit the display of products to only those of that category.

But on my product carousel directive, I have defined a scope method removeFilterCategory() which sets filterCategoryId back to null. It works within its own scope. I can see the effects. But it does not effect the filterCategoryId on the categories directive. I can tell because I use ng-class to set an active class to the list item mentioning the category id to which the products are filtered. But changing filterCategoryId on the categories directive does propagate to the product carousel directives. There is an ng-repeat before the product carousel directives...

In essence. The variable was first defined on the scope of my controller. If I change it on the categories directive, the change gets propagated (after a noticeable while) to the product carousel directives. But if I change it from any of the product carousel items, the categories directive does not reflect the changes. And I don't see why. The product carousel uses a $watch to check filterCategoryId and recalculate its rows..

All directives use an isolated scope with the same variable filterCategoryId and use '=' as scope value.

What could be the issue?

And secondary even if I change filterCategoryId on the categories directive, it takes 5-6sec to reflect changes on the product carousel directives.

I'm feeling I'm missing something here. Either I have an obvious code error I seem to overlook or I'm missing some angular understanding :). Any help in the right direction would be greatly appreciated.

Upvotes: 3

Views: 2480

Answers (1)

caffeinated.tech
caffeinated.tech

Reputation: 6548

I would suggest explicitly telling AngularJS to register the change using $scope.apply( function(){/*change var here*/}); , see the docs.

There is a nice article explaining the details of Angular's digest cycle: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

This seems to be the main problem if you are experiencing delays though I also suggest ensuring that the variable filterCategoryId is always an object, so it is never passed as a copy, maybe change it to filter.CategoryId etc.

Upvotes: 3

Related Questions