CODEWITHSUNDEEP
angularjswatch
Shai M.
Shai M.

Reputation: 1314

Array deep watch in angular view (html)

This is my view (html):

<my-directive collection="currentData"></my-directive>

and this is the data structure:

$scope.currentData = [...
  {
     "name": "lala Page",
     "icon": "icon-docs",
     "sub_data": [
     {
        "name": "1-article",
         "href": "/1-article",
         "icon": "fa fa-pencil"
     },
     {
         "name": "2-article",
         "href": "/2-article",
         "icon": "fa fa-pencil"
     },
     {
        "name": "3-article",
        "href": "/3-article",
        "icon": "fa fa-pencil"
     }
   ...
   ]...
}]

Inside my-directive there are bind-once elements (on sub_data). If the all array change - the view is changed, but when I change the sub_data, the view don't updated. Any idea, how to make the collection be affected by a changes in sub_data?

(I do want to use as less watchers as possible)

Edit

Adding the my-directive code:

angular.module('my_module',[]).directive('myDirective', function(){
return {
    scope:{
        collection: '='
    },
    replace: true,
    template: ['<li my-directive-item ng-repeat="item in collection" raw-model="{{::item}}">',
                '</li>'].join('')
    };
});

I don't have a watch on collection, only the code above. I meant angular doesn't update the collection binding unless I change the array itself, and I want it to update the view when i change a sub property of an item in the collection.

Upvotes: 0

Views: 100

Answers (1)

Shai M.
Shai M.

Reputation: 1314

Ok, I solved it. I'm not proud of the solution but it works:

Inside the controller:

$scope.updateArray = function() {
        ...
        // Do stuff with tempData
        ...

        // Trick for updating the view - because of the bind-once sub items
        $scope.currentData = [];
        $timeout(function(){
            $scope.currentData = tempData;
        }, 0);
    };

Upvotes: 0

Related Questions