Угловой контроллер ручек JS События

Question

У меня есть приложение, у которого есть много вещей, чтобы сэкономить в каскаде, создавая нормальный вид мастера - детали.

В этом представлении у меня есть кнопка «Сохранить все», которая сохраняет каждую строку на итерации, вызывая пользовательские события jQuery, чтобы сериализовать операции сохранения и предотвратить генерацию неконтролируемой очереди запросов.

Каждый раз, когда строка сохраняется, программа уменьшает счетчик и запускает сохранение новой строки.

Everithing заканчивается, когда там нет строк для сохранения (counter = 0).

Это фрагмент кода делает это:

var save_counter = -1; 

// Creates a counter and save content header when finished to save rows. 
var updCounter = function(evt){ 

    // Update Counter 
    save_counter--; 

    // Register updates When there are not rows to skip 
    if ((save_counter===0) 
     || (save_counter===0 && edit_status == "modified")){ 

     console.log('Persist Master'); 
     $(document).trigger('save_ok'); 

    } 
};  

saveRows = $(form_sel); 

// Reset Save Counter 
save_counter = saveRows.length; 

// Iterate through lines 
saveRows.each(function(idx){ 
    var form = $(this); 

    // Execute Uptade Counter once 
    form.one(update_counter, updCounter); 

    // Per each performed save, decrese save counter 
    form.trigger('submit'); 
}); 

Теперь я перенос некоторых важных модулей приложения, с помощью углового, но я понятия не имею, чтобы сделать это.

Существует наилучшая практика для выполнения вызова запроса партии?

Полезно ли использовать переменные $ scope и $ watch, используя что-то вроде этого?

var RowController = angular.controller('RowController', function($scope, $http){ 

    $scope.rows = [ 
      {id : 1, title : 'lorem ipsum'} 
     , {id : 2, title : 'dolor sit amet'} 
     , {id : 3, title : 'consectetuer adipiscing elit'} 
    ]; 

    // Counter Index 
    $scope.save_counter = -1; 

    // "Trigger" the row saving, changing the counter value 
    $scope.saveAll = function() { 
     $scope.save_counter = 0; 
    }; 

    // Watch the counter and perform the saving 
    $scope.$watch('save_counter', function(

     // Save the current index row 
     if ($scope.save_counter >= 0 
       && $scope.save_counter < $scope.rows.length) { 

      $http({ 
       url : '/row/' + $scope.rows[$scope.save_counter].id, 
       data: $scope.rows[$scope.save_counter] 
      }).success(function(data){ 

       // Update the counter ... 
       $scope.save_counter ++; 

      }).error(function(err){ 

       // ... even on error 
       $scope.save_counter ++; 
      }); 

     }; 

    )); 
}); 

Answer 1

Наилучшим подходом является использование service с обещаниями ($q).

Вот пример:

app.factory('RowService', function($http, $q) { 
    return { 
    saveRow: function(row) { 
     return $http({ 
     url: '/row/' + row.id, 
     data: row 
     }); 
    }, 

    saveAll: function(rows) { 
     var deferred = $q.defer(); 
     var firstRow = rows.shift(); 
     var self = this; 

     // prepare all the saveRow() calls 
     var calls = []; 
     angular.forEach(rows, function(row) { 
     calls.push(function() { 
      return self.saveRow(row); 
     }); 
     }); 

     // setup the saveRow() calls sequence 
     var result = this.saveRow(firstRow); 
     angular.forEach(calls, function(call) { 
     result = result.then(call); 
     }); 

     // when everything has finished 
     result.then(function() { 
     deferred.resolve(); 
     }, function() { 
     deferred.reject(); 
     }) 

     return deferred.promise; 
    } 
    } 
}); 

А на контроллере:

app.controller('RowController', function($scope, RowService) { 
    ... 

    $scope.saveAll = function() { 
    // $scope.rows.slice(0) is to make a copy of the array 
    RowService.saveAll($scope.rows.slice(0)).then(
     function() { 
     // success 
     }, 
     function() { 
     // error 
     }) 
    }; 
}); 

Проверьте это plunker для примера.