angularjs解决页面异步加载的问题

最新推荐文章于 2022-01-14 15:53:29 发布

山野灬寻雾灯

最新推荐文章于 2022-01-14 15:53:29 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记

本文链接：https://blog.youkuaiyun.com/qq_39511525/article/details/83141871

前端学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种在AngularJS项目中解决数据获取与筛选问题的方法，利用消息广播机制实现组件间通信，确保数据能被正确地传递和处理。通过具体案例展示了如何使用$scope.$broadcast和$scope.$on来发送和监听消息，从而实现数据的有效更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案列：由于项目中有地方一个API返回来了所有的信息，后面我需要根据这些信息进行筛选查询，就遇到了，前面的数据拿不到的情况

解决方案：消息广播的机制

$scope.getColumnTree = function() {
      var path = "menu/getColumnTree.show";
      var param = {};
      param.menuId = $scope.menuId;
      // param.status = 1;
      videoService.serviceFunction(path, param, function(returnValue) {
        if (returnValue.status.returnCode != -1) {
          $scope.columnTree = returnValue.data.list;
          for (var i = 0; i < $scope.columnTree.length; i++) {
            // $scope.getCourseList($scope.columnTree[i].currentColumn.columnCode,i);
            $scope.classFlag = true;
            if ($scope.columnTree[i].childColumnSortTreeList == null) {
              $scope.columnTree[i].childColumnSortTreeList = new Array();
            }
            switch (i) {
              case 0:
                $scope.areaList = $scope.columnTree[0];
                break;
              case 1:
                $scope.artList = $scope.columnTree[1];
                break;
              case 2:
                $scope.schoolList = $scope.columnTree[2];
                break;
              case 3:
                $scope.cultureList = $scope.columnTree[3];
                break;
              case 4:
                $scope.scienceList = $scope.columnTree[4];
                break;
              case 5:
                $scope.lifeList = $scope.columnTree[5];
                break;
              case 6:
                $scope.appreciateList = $scope.columnTree[6];
                break;
            }
          }
          $scope.col_list = $scope.columnTree;
          console.log($scope.col_list);
          $scope.$broadcast("returnValueLoaded");
        }
      });
    };

这个时候我们需要用到广播$scope.$broadcast。发送广播以后，需要通过$scope.$on进行监听。

$scope.$on("returnValueLoaded",function(){
        $scope.getCourseList($scope.areaList.currentColumn.columnCode,0);
        $scope.getCourseList($scope.artList.currentColumn.columnCode,1);
    })

网上还有一些其他的推荐方法，推荐地址：https://blog.youkuaiyun.com/guduyishuai/article/details/52947723