angular双向绑定机制异常

发布于 2022-09-02 20:59:54 字数 3124 浏览 28 评论 0

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

clipboard.png

很简单的一个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的渲染机制吗?但是为什么我新增或者查询的时候它能及时更新过来呢?

    clipboard.png

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

    如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(1

    毁梦 2022-09-09 20:59:54

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

    大概理了一下,你可以试着改改:

    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);
            });
        }
    }
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文