Angular 双向数据绑定在使用 HTTP 时不起作用

Question

我在 ui.router 中使用 ControllerAs，当我调用 API 并通过 vm 方法为模板设置范围变量时，我在 PHP 中有一个 API它相应地工作，当我想删除一些记录集时 并再次更新 vm.servers 变量，然后模板不会根据新更新的对象进行更改。

function serverController( server, $state, $rootScope, $scope)
{
    var vm  = this;

    vm.delete = function(server_id) {
        vm.loader = false;
        server.delete('server/' + server_id)
            .then(
            function(response){
                if(response.status === 200 && !response.data.status) {
                    alert(response.data.message);

                } else if(response.status === 200 && response.data.status){
                    server.setRootScope().then(
                        function(){
                            vm.servers = $rootScope.servers;
                            $state.go($state.current, {}, {reload: true});
                        }
                    );

                }

            }, function(response) {
                if(response.status === 401) {
                    $state.go('login');
                }
            }
        );
    };


    if($rootScope.servers == undefined) {
        server.get('server')
            .then(
            function (response) {
                if (response.status === 200) {
                    vm.servers = response.data;
                    $rootScope.servers = {};
                    angular.forEach(response.data, function (val) {
                        if('running' === val.status) {
                            val['serverState'] = true;
                        } else {
                            val['serverState'] = false;
                        }
                        $rootScope.servers[val.id] = val;
                    });
                }
            },
            function (response) {
                if (response.status === 401) {
                    $state.go('login');
                }
            });
    } else {
        vm.servers = $rootScope.servers;
    }
}

模板文件。

<table class="table movietable" width="70%" border="1">
    <tr ng-repeat="server in serverModel.servers">
        <td width="85%">
            <table>
                <tr>
                    <td><b>Server Label: </b> {{server.label}}</td>
                </tr>
                <tr>
                    <td>Status: {{server.status}}</td>
                </tr>
                <tr>
                    <td>Created At: {{server.created_at}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

我看你的代码。我发现了一个问题，

• 您没有更新 vm.servers 响应数据。由于 $rootScope.servers 中的值可能 变老。因此，每次调用删除函数时，您都必须使用新数据更新 $rootScope.servers 或 vm.servers。

我已经从您的代码中创建了一个小演示，希望它对您有所帮助 确定问题。在这个演示中，我首先将数据加载到表中 在此之后，在按钮上单击按 id 删除记录并更新 vm.servers。

我的控制器

.controller('Controller',['$rootScope', function($rootScope) {
    var vm =this;
    vm.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };

    vm.delete = function(server_id) { 
    vm.loader = false;

    // added some value to $rootScope.servers or you can update it with response data. This is where you will need to update your logic.
    $rootScope.servers = [
                            {   id: 1,   
                                name: 'Naomi1',   
                                address: '1600 Amphitheatre1' 
                            },
                            {   
                                id: 2,   
                                name: 'Naomi2',   
                                address: '1600 Amphitheatre2' 
                            }
                          ];  

    angular.forEach($rootScope.servers, function(value,key) {   
        if(value.id == server_id) { 
          $rootScope.servers.splice(key,1); 
        }
    });    

    console.log($rootScope.servers); 

    //Here I have assign new $rootScope.servers.
    vm.servers = $rootScope.servers;

    };

    var val = {};
    vm.init = function() {
            vm.servers = [{
                          id: 1,
                          name: 'Naomi1',
                          address: '1600 Amphitheatre1'
                        },{
                          id: 2,
                          name: 'Naomi2',
                          address: '1600 Amphitheatre2'
                        }];
            $rootScope.servers = {};
            val['serverState'] = true;
            $rootScope.servers[val.id] = val;
        }

    vm.init();

  }])

index.html

<div ng-controller="Controller as vm">
  <table class="table movietable" width="70%" border="1">
    <tr>
        <td width="85%">
            <table>
                <tr ng-repeat="server in vm.servers">
                    <td><b>Server Label: </b> {{server.name}}</td>
                    <td>Status: {{server.address}}</td>
                    <td><button ng-click="vm.delete(server.id);">Delete</button></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</div>

希望对您有所帮助！

干杯， 吉米