AngularJS $scope issues in tabset

Question

I have a problem trying to watch in my controller a collection generated by a filter in the view.

I store the filtered data in a variable :

 <table class="table">
     <tr ng-repeat="item in filteredCollection = (myCollection | filter: txtSearch)">
         <td ng-bind="item"></td>
     </tr>
 </table>

and I would like to subscribe to changes of 'filteredCollection ' in my controller :

$scope.$watchCollection('filteredCollection', function() {
    if (typeof($scope.filteredCollection) != 'undefined')
        console.log('Results changed : ' + $scope.filteredCollection.length);
});

I have set up this JSFiddle to show you my issue : my watch function is never called.

Fun Fact, it works when I remove all the <tabset> <tab> tags in my HTML. I think I messed up with the $scope, but I don't get why. Maybe the tabset create a new $scope child or something.

I hope you guys will find out what is going on here,

Cheers

eladcon · Accepted Answer · 2015-04-01 14:23:48Z

1

Try to put filteredCollection in an object, so the it will change the correct scope property:

$scope.obj = { filteredCollection : [] };
$scope.$watchCollection('obj.filteredCollection', function(newVal) {
    if (typeof($scope.obj.filteredCollection) != 'undefined')
        console.log('Results changed : ' + $scope.obj.filteredCollection.length);
});

In the HTML:

<tr ng-repeat="item in obj.filteredCollection = (myCollection | filter: txtSearch)">

See this fiddle.

answered Apr 1, 2015 at 14:23

eladcon

5,8251 gold badge18 silver badges19 bronze badges

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

2 Comments

bviale Over a year ago

Thanks for your answer, but could you explain why I have to do that ? Is it a matter of variable passed by reference / value ?

eladcon Over a year ago

thats because ngRepeat create a child scope, and then your filteredCollection will be a property on that scope. If you define an obj on the parent scope, then every change will be written to that parent scope. see this: github.com/angular/angular.js/wiki/Understanding-Scopes

Steve · Accepted Answer · 2015-04-01 14:25:02Z

1

You are correct in your thought that tabset and tab create new scopes. Because of that you are losing the context of filteredCollection since this is now being created in the context of the tab directives scope.

Angular fairly recently added controllerAs syntax that helps to avoid situations like this. It allows us to determine better which scope something is being executed in.

I have updated your jsFiddle with controllerAs syntax to show how this helps. The watch now fires as expected.

http://jsfiddle.net/hezwyjx1/2/

Here is a resource for some help with controller as syntax:

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

answered Apr 1, 2015 at 14:25

Steve

1,1057 silver badges20 bronze badges

1 Comment

bviale Over a year ago

Thank you for this interesting approach, I didn't know this "controllerAs" thing, and the article was great. But in my case, I find this solution 'heavier' than putting the collection in an object

Jesus · Accepted Answer · 2015-08-06 10:03:58Z

0

This is an another post with the solution for this: https://github.com/angular-ui/bootstrap/issues/1553

answered Aug 6, 2015 at 10:03

Jesus

7527 silver badges5 bronze badges

Collectives™ on Stack Overflow

AngularJS $scope issues in tabset

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related