http isteği sonrası açılamayan sayfa güncelleniyor (kapsam sorunu?)

Sayfam yüklendiğinde, mongo db adresindeki tüm öğeler gösteriliyor. Yeni girişler girmek veya girişleri silmek için bir formum var. Oluştururken veya silerken, http süreci çalışır, ancak yeni veriler DOM'de güncellenmez.http isteği sonrası açılamayan sayfa güncelleniyor (kapsam sorunu?)

Araştırdığım ilgili soruların çoğu, ng denetleyicisinin tüm vücudu saran olduğundan emin olmasını öneriyor. Diğerleri $ uygulamasının kullanılmasını önerdi, fakat bunun yanlış olduğunu da okudum. Denediğimde, yine de "devam ediyor" uyarısı alıyorum.

Tek düşüncem, http isteğinden sonra yeni bir kapsam yüklendiğinde ve açısal açılmıyor. Ya da bir sebepten dolayı isteğimden sonra verileri yeniden yüklemiyor. İşte kodum, yardımın için teşekkürler.

index.html

<body ng-controller="MainController"> 

    <!-- list records and delete checkbox --> 
    <div id="record-list" class="row"> 
     <div class="col-sm-4 col-sm-offset-4"> 
      <!-- loop over records in $scope.records --> 
      <div class="checkbox" ng-repeat="record in records"> 
       <label> 
        <input type="checkbox" ng-click="deleteRecord(record._id)"> 
        {{ record.artist}} - {{ record.album }} - {{ record.bpm}} 
       </label> 
      </div> 
     </div> 
    </div> 
    <!-- record form data --> 
    <div id="record-form" class="row"> 
     <div class="col-sm-8 col-sm-offset-2 text-center"> 
      <form> 
       <div class="form-group"> 
        <input type="artist" class="form-control input-lg text-center" placeholder="Artist" ng-model="formData.artist"> 
       </div> 
       <div class="form-group"> 
        <input type="album" class="form-control input-lg text-center" placeholder="Album" ng-model="formData.album"> 
       </div> 
       <div class="form-group"> 
        <input type="bpm" class="form-control input-lg text-center" placeholder="BPM" ng-model="formData.bpm"> 
       </div> 
       <button type="submit" class="btn btn-primary btn-lg" ng-click="createRecord()">Add</button> 
      </form> 
     </div> 
    </div> 
</div>

controller.js

angular.module('myApp', []).controller('MainController', ['$scope', '$http', function ($scope, $http) { 
$scope.formData = {}; 
$scope.sortType  = 'artist'; 
$scope.sortReverse = false; 
//$scope.searchRecords = ''; 
$http.get('/api/records/') 
    .success(function(data) { 
     $scope.records = data; 
     console.log(data); 
    }) 
    .error(function(data) { 
     console.log('Error: ' + data); 
    }); 
    $scope.createRecord = function() { 
     $http.post('/api/records/', $scope.formData) 
      .success(function(data) { 
       //$scope.formData = {}; 
       $scope.records = data; 
       console.log(data); 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 
    $scope.deleteRecord = function(id) { 
     $http.delete('/api/records/' + id) 
      .success(function(data) { 
       $scope.records = data; 
       console.log("delete record scope: " + data); 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    };

}])

kaynak

2016-03-20 p.mcgillis

Yani vermez: Eğer Mongoose (mongoDB eklentisi) kullanırsanız

, böyle bir şeyle başarısı üzerine güncellenmiş verileri geri göndermek için API kodunu güncelleyebilirsiniz güncellenmiş kayıt dizisi? Ayrıca, "$ http" sözü üzerindeki "başarı" ve "hata" geri dönüşleri [kullanımdan kaldırılmıştır] (https://docs.angularjs.org/api/ng/service/$http#deprecation-notice). Konsolunuzu herhangi bir hata için kontrol ettiniz mi? – Phil

İsteğinizdeki yanıt başlıklarını kontrol edin. Yanıtı kaydedebilmeniz ancak görünümünüzde görünmüyorsa, Content-Type: application/json'ı almanız gerektiğinde Content-Type: text/plain alma şansınız var demektir. Bu durumda, sunucunuzdaki yanıt üstbilgisini değiştirebilir veya tembelseniz sadece $ scope.records = JSON.parse (data) yapabilirsiniz; – ruedamanuel

@Phil, benim problemim buydu. CreateRecord işlevim güncellenmiş kayıt kümesini döndürmedi. Ayrıca, “başarı” ve “hata” nın kullanımdan kaldırılmasından dolayı beni bilgilendirdiğiniz için teşekkür ederim. ”.then (function successCallback (response)' işlevini kullanmak için değiştirdim. Yanıtlarınız için diğer herkese teşekkürler. –

Kişisel kontrolör JS iyi görünüyor - Bu bakmaktan söyleyebilirim size POST/DELETE başarılı olduğunda güncellenen değerleri mongoDB koleksiyonunuzdan dışa aktarmanız gerekir. ile yanıt

her HTTP operasyonu (POST DELETE)

// POST 
// -------------------------------------------------------- 
// Provides method for saving new record to the db, then send back list of all records 

app.post('/api/records', (req, res) => { 

    // Creates a new record based on the Mongoose Schema 
    const newRecord= new Record(req.body); 

    // New record is saved to the db 
    newRecord.save((err) => { 

     // Test for errors 
     if(err) res.send(err); 

     // Now grab ALL data on records 
     const all = Records.find({}); 
     all.exec((err, records) => { 

      // Test for errors 
      if(err) res.send(err); 

      // If no errors are found, it responds with JSON for all records 
      res.json(records); 
     }); 

    }); 
});

kaynak

2016-03-21 02:20:52 vohzd

http isteği sonrası açılamayan sayfa güncelleniyor (kapsam sorunu?)

cevap

İlgili konular