any way in angular to re render or re compile part of page or whole page that us

any way in angular to re render or re compile part of page or whole page that us  using -'javascript,angularjs'

We have multiple lists on the page that can have hundreds of items so for performance reasons, we'd like to use one-time bindings for things and only update when we know it needs to be updated and significantly reduce the watcher numbers.

If we do use one-time bindings, is there a way to force Angular to re-render part of the page or even the whole page?

asked Oct 6, 2015 by akhilesh
0 votes

1 Answer

0 votes

So I did some research and there doesn't seem to be a native way of doing this. I did find this possible code to help that could work but when I tried it had issues with some custom 3rd party directives I was using but it might work for other people who want to do simpler things:

The only functionality I found that seemed to do what I was looking for was ng-if, which as we know if it goes from true to false then back to true it will remove the element and all angular/scopes when it's set to false and then recompiling and re-adding when set to true (yes that includes rebinding one time bindings!).

I've been working on this as a solution and will post back with how it goes but initial tests do seem promising. Any thoughts or comments on this approach are also welcome.


So I did manage to get this to work. Basically you take the element which you want to recompile and rebind and add an ng-if with some sort of "reset" variable like so:

... Some more code that includes one time bindings i.e. {{}}...

In your controller:

  .controller('SampleCtrl',['$scope', function($scope){
    $scope.reset = true;

    $scope.dataUpdated = function(){
        $ = "new name";
        $scope.reset = false;

Where dataUpdate can be any event handler that causes the data to be updated (for example a form for a new object or a form to update an existing object) your button could be

I'm not sure if the timeout is the best way to do it. When I tried just doing $scope.reset = false; $scope.reset = true; it didn't work. Maybe could try injecting a $scope.$apply() in between them. If anyone has any comments about this please let me know.

But this works and so everything will be recomplied (and also rerendered) and anything with a one-time bind inside the #dashboard-view div will be rebinded if those values were changed.

If anyone has a better solution or way of doing this feel free to answer as well. I hope this helps someone else, it took me a while to come up with this approach .

answered Oct 6, 2015 by devkumargupta