angular.js - angular双向绑定机制异常

问题描述

问 题

目前项目为当页面应用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);

/**

• 基础商品集合

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

   }
   }

`
可以看出删除在删除代码:
`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});
        }
    })
}`

当我判断成功后立马info_list()调用了一次查询，但是结果却是页面的数据没有及时更新，而是我第二次触发删除的时候他才更新了之前的数据。
请问这个问题是什么原因呢？是因为angluar的渲染机制吗？但是为什么我新增或者查询的时候它能及时更新过来呢？

这是返回查询的最新数据，显示我确实是删除成功了，但是为什么就是无法同步就刷新呢？

解决方案

谢邀吧！不过，你这代码贴的，我都醉了，还真是难看懂。

大概理了一下，你可以试着改改：

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

这篇关于angular.js - angular双向绑定机制异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！