javascript - Angularjs: buggy two way data binding -

javascript - Angularjs: buggy two way data binding -

i trying create recursive grid layout using directives.

there parent container(appliedgrids) contains array of grids within it. a grid contains array of columns within it. each column has 2 properties: span(width of column) , info (data within column) each column info contains either grid 1 time again or widget. if contains grid create recursive phone call grid directive.

my problem when delete grid using remove button within it- gets removed appliedgrid container 2 way info binding doesn't work should. in place of current grid, lastly grid gets removed ui.

link- http://plnkr.co/edit/dzkihkvjdloziyy3jgdx?p=preview

steps reproduce: 1) click remove button on first grid, see in place of first, sec grid gets removed. while json info of appliedgrid contains sec grid within it. 2 way binding of angular doesn't work supposed to.

i did little thinking in previous reply , turns out not correct.

firstly, not utilize track $index. makes no sense in case. track by optimisation of ng-repeat correlate (potentially new) objects in array "business-wise" equal old objects in array, re-uses scopes , dom elements in effort minimize dom manipulation. is: if give ng-repeat hint new object in new array "equal" old object in old array, reuse scope , hopping new object not dramatically different compared old one, less $watch callbacks fire , less dom updates occur.

your actual problem "statically" or "once-off" binding info statements like:

$scope.gridindex = $parse($attrs.gridindex)($scope); $scope.gridvalues=$parse($attrs.appliedgrid)($scope); $scope.gridparent=$parse($attrs.appliedgrids)($scope);

the first grid item indeed removed array ng-repeat not remove scope , dom element because track $index used. still, new 0-index object (2nd, previously) used update scope (the 1 created 1st object).

you not see reflecting ui because $scope.gridvalues evaluated in origin , not evaluated again.

so, though $scope.appliedgrid points [{span:12,data:[object]}], $scope.gridvalues still points [{span:6,data:[object]},{span:6,data:[grid2]}].

removing track $index solves problem because ng-repeat tracks objects reference each object associated same scope until removed array.

you can verify angscope, little firebug-based scope inspector. have open in separate tab "launch preview in separate window" in order work in plunker.

i tried find quick prepare there no luck. guess, have re-write using isolated scopes , real 2-way binding.

javascript angularjs angularjs-directive angularjs-scope