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

AngularJS view not updated after model updates

本文关键字:更新 视图 AngularJS 模型      更新时间:2023-09-26

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);
            }
        })

    }
})();

知道为什么吗?

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

在视图中:删除"VM"。