2016-01-26 2 views
4

Я могу добавлять фотографии и удалять их, однако, когда я это делаю, мне нужно обновить. Я бы хотел, чтобы область была обновлена, и это будет сделано автоматически, но после добавления файлов получение никогда не запускается. Должен ли я использовать .apply для этого?Как я могу получить 'get' для вызова автоматически?

app.js

$scope.submit = function() { 
    if ($scope.file) { 
    $scope.upload($scope.file); 

    } 

    if($scope.files){ 
    $scope.uploadFiles($scope.files); 
    console.log('this happens after upload files'); 
    } 
}; 

$scope.uploadFiles = function (files) { 

    if (files && files.length) { 
    for (var i = 0; i < files.length; i++) { 
     Upload.upload({ 
     url: 'api/admin/photos', 
     data: {files: files[i]} 
     }).then(function(resp){ 
     $scope.photos.push(resp.data); 
     $log.info(resp.data); 
     $log.info($scope.photos); 
     getPhotos(); 
     }, 
     function(resp){ 
     console.log('Error status: ' + resp.status); 
     }, 
     function(evt){ 
     //var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
     //console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name); 
     }); 
    } 
    } 

}; 



    //get all photographs 
    $scope.photos = []; 
    var getPhotos = function(){ 

$http.get('api/admin/photos/get') 
    .then(function successCallback(response){ 
     $scope.photos.length = 0; 
     for (var i=0; i < response.data.length; ++i){ 
      $scope.photos.push(response.data[i]); 
     } 
     $log.warn($scope.photos); 
     console.log('this happened automatically'); 
    }, 
    function errorCallback(error){ 
     $log.warn(error); 
    }); 

};

getPhotos(); 

$scope.deletePics = function(id){ 

    $http.delete('/api/admin/photos/' + id, {params : {id: id}}) 
     .then(function successCallback(response){ 
      //console.log(response); 
      $scope.photos = $scope.photos.filter(function(photo){ 
      return photo.id !== id; 
      }); 
      }, 
      function errorcallback(error){ 
       console.log(error); 
      }); 

    }; 

Когда я представляю для загрузки, в моем console.log это то, что я получаю:

[Object, Object]0: Object1: Objectlength: 2__proto__: Array[0] 

app.js: 375 это произошло автоматически

enter image description here

Однако, когда я обновляю код, появляются изображения.

HTML

<form ng-controller="adminController" name="form" enctype="multipart/form-data"> 


Single Image with validations 

Выберите отправить

<span class="progress" ng-show="progress >= 0"> 
     <div style="width:{{progress}}%" ng-bind="progress + '%'"></div> 
    </span> 

</form> 


<ul > 
    <li ng-repeat="photo in photos"><img ng-src="img/{{ photo.url}}" /> 

    {{ photo }} 
    {{photo.name}} 

    {{photos}} 

    <button class="button btn btn-warning" ng-  click="deletePics(photo._id)">Delete</button> 
</li> 

</ul> 
+0

Если 'Upload' не использует' $ http' обслуживание, то да. –

+0

Итак, поставьте его в методе и вызовите метод после вызова Ajax. – epascarello

+0

@epascarello Это добавит дополнительный запрос, чтобы восстановить все данные, которые уже находятся на клиенте. –

ответ

3

просто прибудет в функцию, что вы звоните в ваш then()

$scope.photos = []; 
//get all photographs 
var getPhotos = function(){ 
    $http.get('api/admin/photos/get') 
     .then(function successCallback(response){ 
      $scope.photos.length = 0; 
      for (var i=0; i < response.data.length; ++i){ 
       $scope.photos.push(response.data[i]); 
      } 
     }, 
     function errorCallback(error){ 
      $log.warn(error); 
     }); 

}; 
getPhotos(); // That way it is still called 

.

$scope.uploadFiles = function (files) { 

    if (files && files.length) { 
    for (var i = 0; i < files.length; i++) { 
     Upload.upload({ 
     url: 'api/admin/photos', 
     data: {files: files[i]} 
     }).then(function(resp){ 
     $scope.photos.push(resp.data); 
     }, 
     function(resp){ 
     console.log('Error status: ' + resp.status); 
     getPhotos();    // <==== Here 
     }, 
     function(evt){ 
     var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
     console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name); 
     }); 
    } 
    } 

}; 
+0

'function getPhotos = function() {' a typo. И это позволит восстановить данные с сервера, которые уже были на клиенте, и, наконец, вызвать цикл дайджеста. Почему бы не назвать это вручную без дополнительного запроса? –

+0

Это сработало с точки зрения получения чего-либо.Однако теперь в моем console.log я вижу объект в массиве, однако когда в представлении ng-repeat я не вижу массив. Может быть, область охвата не такая же? – arsenalist

+0

[Объект, объект, объект, объект, объект, объект, объект] 0: Объект 1: Объект 2: Объект 3: Объект 4: Объект 5: Объект 6: Объект длина: 7 – arsenalist

0
 $scope.uploadFiles = function (files) { 

     if (files && files.length) { 
     for (var i = 0; i < files.length; i++) { 
      Upload.upload({ 
      url: 'api/admin/photos', 
      data: {files: files[i]} 
      }).then(function(resp){ 
      //$scope.photos.push(resp.data); 
    $scope.getPhotos().then(function(response){ 
      $scope.photos = response.data; 
     }, 
     function errorCallback(error){ 
      $log.warn(error); 
     }); 
      }, 
      function(resp){ 
      console.log('Error status: ' + resp.status); 
      }, 
      function(evt){ 
      var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
      console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name); 
      }); 
     } 
     } 

    }; 



    //get all photographs 
    $scope.getPhotos = function(){ 

     return $http.get('api/admin/photos/get'); 
    } 

    $scope.getPhotos().then(function(response){ 
      $scope.photos = response.data; 
     }, 
     function errorCallback(error){ 
      $log.warn(error); 
     }); 

    $scope.deletePics = function(id){ 

     $http.delete('/api/admin/photos/' + id, {params : {id: id}}) 
      .then(function successCallback(response){ 
       }, 
       function errorcallback(error){ 
        console.log(error); 
       }); 

     }; 
Смежные вопросы