AngularJS视图在模型更新后未更新

Question

新增Angular，我试图保存表单并在调用PUT或POST调用到后端后更新视图。一旦我从后端收到OK状态，我正在用最新的响应更新我的模型。但只有指令“ng-click”中的模型得到更新，但其他模型则没有。这里是我的代码：

///HTML 
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8"> 
        <thead> 
        <tr> 
         <th data-toggle="all">Release Title</th> 
         <th data-hide="all">Release Genre</th> 
         <th data-hide="all">UID</th> 
         <th data-hide="all">Classical</th> 
         <th data-hide="all">Tracks</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr ng-repeat="album in vm.albums" footable> 
     // This one (album.data.title) gets updated but the other ones do not 
         <td ng-click="vm.editAlbum(album, $index)">{{album.data.title}}</small></td> 
         <td>{{album.data.genre}}</td> 
         <td>{{album.data.uid}}</td> 
         <td ng-if!="album.data.classical">No</td> 
         <td ng-if="album.data.classical">Yes</td> 
         <td> 
          <li ng-repeat="track in album.data.tracks"> 
           <a ng-click="vm.selectTrack(album, track)">{{track.title}}</a> 
          </li> 
         </td> 
        </tr> 
        </tbody> 
        <tfoot> 
        <tr> 
         <td colspan="5"> 
          <ul class="pagination pull-right"></ul> 
         </td> 
        </tr> 
        </tfoot> 
       </table> 

这里是我的控制器：

// controller.js (Just pasting the saveRelease method that does the on-click event handling in HTML: 

(function(){ 

angular.module('app.uploadedReleases').controller('UploadedReleasesController', UploadedReleasesController); 

UploadedReleasesController.$inject = ['$http', '$log', '$scope', '$state', '$rootScope', 'APP_CONFIG']; 
function UploadedReleasesController ($http, $log, $scope, $state, $rootScope, APP_CONFIG){ 

    var vm = this; 
    vm.albums = []; // list of all albums 

    vm.albumPriority = [0, 4, 6, 8, 10]; 
    vm.getAlbumTracks = getAlbumTracks; 
    vm.editAlbum = editAlbum; 
    vm.selectTrack = selectTrack; 
    vm.selected = {}; 
    vm.saveRelease = saveRelease; 


    vm.testingAlbumSelected = false; 

    return init(); 

    function init(){ 

     $http.get('http://localhost:8080/api/releases').then(function(responseData){ 

      //check the status from the response data. 
      vm.responseStatus = responseData.status; 
      if(vm.responseStatus !== 200){ 
       //error message 
      } 
      // else, Parse the json data here and display it in the UI 
      for(var album in responseData.data){ 
       vm.albums.push({slug: album, data: responseData.data[album]}); 
      } 
     }) 
    } 

     function getAlbumTracks(slug, index){ 
     $http.get('http://localhost:8080/api/releases/' + slug).success(function(trackResponse){ 
      //parse each album and get the track list 
      vm.showingAlbumIndex = index; 
      vm.albums.tracks = []; 
      vm.selected = {}; 
      vm.selected.album = vm.albums[index]; 
      vm.testingAlbumSelected = true; 

      for(var i = 0; i<trackResponse.tracks.length; i++) { 
       vm.albums.tracks.push(trackResponse.tracks[i]); 
      } 
      $log.debug(vm.albums.tracks); 

      vm.formAlbum = new Album(vm.selected.album.data.upc, 
            vm.selected.album.data.title, 
            vm.selected.album.data.label, 
            vm.selected.album.data.genre, 
            vm.selected.album.data.releaseType, 
            vm.selected.album.data.holdDate, 
            vm.selected.album.data.priority, 
            vm.selected.album.data.memo); 
     }) 
    } 

    function selectTrack(album, track){ 
     vm.selected.album = album; 
     vm.selected.track = track; 
     vm.testingAlbumSelected = false; 
    } 

function editAlbum(album, index){ 

     getAlbumTracks(album.slug, index); 

     vm.selected = album; 
    } 

function saveRelease(){ 

     // Call the PUT request to update the release metadata and refresh the page 
     // so that the Album list gets updated with the latest changes 
     var url = 'http://localhost:8080/api/releases/' + vm.selected.album.slug; 
     $http.put(url, vm.formAlbum).then(function(saveAlbumResponse){ 
      if(saveAlbumResponse.status === 202){ 
       //successfully saved response on backend 
       // Update the current models to show the newer data 

       vm.album.data = vm.formAlbum; 
       console.log("album array vm.albums = "+vm.albums); 

      } 

     }) 


    } 
})(); 

任何想法，为什么？

Answer 1

尝试删除“var vm = this”行。并在您的控制器中将vm.xxxx重命名为$ scope.xxxx。

在视图中：删除“vm”。