ng-repeat with directive: how to destroy repeated items after array has changed?

Question

I have an angular js app, that uses an ng-repeat with a directive like this:

<div data-ng-repeat="n in items">
   <div data-my-directive
        item="n"></div>
</div>

where items is an array with integers.

Depending on actions of the user, the items array can be completely destroyed and made anew with new integers.

First time, it may be [1,2,4,9] and next it may be [1,3,6,7] for instance. This is dependent on some user choices.

The directive my-directive will perform some business logic server-side, so it will call the server as soon as it gets loaded. And then after a result returns, it shows a nice table to the users.

The problem is that some users don't wait until everything is nice and loaded and switch their view (which means the array changes). In this case, I see that the calls to the server are still being executed and that the result-function is still being called, even though the directive itself has been destroyed because the ngRepeat has rebound and all of the directives are re-made.

For instance:

$http.get(service.url + '/filters').success(function(result) {
    alert(result);
 });

This will display all of the alerts, even of the directives that are no longer on the page. This poses a few problems. Can I destroy the directives in the repeat when the array changes or something like that to make sure that no logic is executed in a directive that shouldn't exist anymore (or that isn't displayed on the page anymore) ? Or do you have some other ideas on how best to approach this?

Ideally, the directives should just disappear after the ng-repeat has rebound itself, so no logic is executed as soon as data comes back from the server.

Answer 1

The directive needs to use the $destroy event to cancel operations in progress.

app.directive("myDirective", function() {
    return {
        controller: function($scope, $http, $q) {
            var canceller = $q.defer();
            var cancel = function(reason){
                canceller.resolve(reason);
            };

            $http.get(url, { timeout: canceller.promise})
               .then(function(response){
                   $scope.data = response.data;
               });

           $scope.$on('$destroy', function () {
               cancel("Scope destroyed");
           });
       }
    }
});

When the ng-repeat removes an item, it destroys the scope of the item. Use the $destroy event to cancel asynchronous operations in progress.

From the Docs:

The $destroy() method is usually used by directives such as ngRepeat for managing the unrolling of the loop.

Just before a scope is destroyed, a $destroy event is broadcasted on this scope. Application code can register a $destroy event handler that will give it a chance to perform any necessary cleanup.

--AngularJS $rootScope.scope API Reference -- $destroy

Answer 2

So I have a few thoughts for your question.

First you could use ng-cloak which is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. I find this very helpful if I want the user to wait until all the data has returned to view the page. ex.

<div id="template1" ng-cloak>{{ 'hello' }}</div>

Second you could try a resolve. A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before actually changing routes.

$routeProvider
    .when("/news", {
        templateUrl: "newsView.html",
        controller: "newsController",
        resolve: {
            message: function(messageService){
                return messageService.getMessage();
        }
    }
})

Answer 3

When the user changes the parameters you can cancel the running request and start a new one.

In this Scott Allen's blog post you can find the detailed explanation of how this work.

You start creating a service or a factory with the method you will call:

var getData = function(){
    var canceller = $q.defer();

    var cancel = function(reason){
        canceller.resolve(reason);
    };

    var promise =
        $http.get(service.url + '/filters', { timeout: canceller.promise})
            .then(function(response){
               return response.data;
            });

    return {
        promise: promise,
        cancel: cancel
    };
};

Then you call it in this way:

var request = service.getData();
$scope.requests.push(request);
request.promise.then(function(movie){
    $scope.movies.push(movie);
    clearRequest(request);
}, function(reason){
    console.log(reason);
});

You then provide a method that will cancel the request:

$scope.cancel = function(){
    var request = // retrieve the correct request from the requests array        
    request.cancel("User cancelled");
    // Remove the request from the array
};