angular.js - angular two-way binding mechanism exception

Question

目前项目为当页面应用admin，因为使用angular不是很多，但也做过一个项目。属于原理不是很懂，但大概怎么知道使用的水平。
最近遇见了一个让我比较差异的问题。一直找不到问题的所在所以来此求angular的点评下我的异常，或者说angular的双向绑定机制。

很简单的一个table列表，我目前的增删改查的功能大概步骤是这样的：
查询:查询
新增:新增----新增成功后再一次调用一次查询，实现了添加数据后立马列表就成功显示出来了不需要刷新。
修改，删除也是和新增一样，成功后再一次调取查询，更新一下数据列表。
代码如下： `

angular.module('index_area').controller('GoodlistCtrl',GoodlistCtrl);
GoodlistCtrl.$inject = ['$state','GoodResource','PublicResource',"$stateParams"];
function GoodlistCtrl($state,GoodResource,PublicResource,$stateParams) {

document.title ="基础商品列表";
var vm = this;
vm.pagecount;                                                           //分页总数
vm.pageint=1;                                                           //当前分页导航
vm.skip=0                                                               //从第几个开始
vm.limit=12;                                                            //从第几个结束
vm.list;

//获取页面坐标
vm.index=$stateParams.index;    
PublicResource.navclass(vm.index)


//分页点击事件
vm.pageChanged = function(){
    
}
//获取sessionId
vm.seid=PublicResource.seid("cw19931024");


//新增商品
vm.addinfo = function(list){
    GoodResource.addlist(list,vm.seid).then(function(data){
        console.log(data)
    })
}

//查询基础商品列表
info_list(vm.seid);

/**

• Basic product collection

• @param {Object} seid
  */

1. info_list(){

       GoodResource.list(vm.seid,vm.skip,vm.limit).then(function(data){
          vm.list=data.result;
          console.log(data.result)
      })

   }

   vm.getmack = function(id){

      $state.go("/good/format",{"id":id})

   }

   vm.delinfo = function(id){

      layer.confirm('您确定要删除数据？', {
            btn: ['确定','取消'] //按钮
      }, function(){
          remove(id);
      });

   }

2. remove(id){

      GoodResource.dellist(vm.seid,id).then(function(data){
          console.log(data)
           if (data.status=="OK") {                    
              layer.msg('删除成功~', {icon: 1});
              info_list(vm.seid);
              layer.closeAll();
          } else{
              layer.msg('删除异常，请联系管理员~', {icon: 0});
          }
      })

   }
   }

`
You can see that deletion is in the deletion code:
`function remove(id){

    GoodResource.dellist(vm.seid,id).then(function(data){
        console.log(data)
         if (data.status=="OK") {                    
            layer.msg('删除成功~', {icon: 1});
            info_list(vm.seid);
            layer.closeAll();
        } else{
            layer.msg('删除异常，请联系管理员~', {icon: 0});
        }
    })
}`

When I determined that it was successful, I immediately called info_list() to query, but the result was that the data on the page was not updated in time. It was only when I triggered the deletion for the second time that it updated the previous data.
What is the reason for this problem? Is it because of angluar's rendering mechanism? But why can it be updated in time when I add something or query it?

This is the latest data returned by the query, showing that I have indeed deleted it successfully, but why can't it be refreshed without synchronization?

Answer 1

Thanks for the invitation! However, the code you posted makes me drunk. It is really difficult to understand.

I roughly sorted it out, you can try to change it:

GoodlistCtrl.$inject = ['$scope', '$state','GoodResource','PublicResource',"$stateParams"];

function GoodlistCtrl($scope, $state,GoodResource,PublicResource,$stateParams) {

    function info_list(){
        GoodResource.list(vm.seid,vm.skip,vm.limit).then(function(data){
           vm.list=data.result;
           $scope.$apply();
           console.log(data.result);
        });
    }
}