如何通过按钮点击初始化AngularJS Factory？

嘿，我先帮你把Factory里的几个小问题修正了，再一步步实现按钮点击初始化的功能——毕竟原有代码里的异步逻辑和this指向问题会导致数据加载失败或者重复请求哦！

第一步：修复Factory的核心问题 #

原来的代码里，$http回调里的this并不指向iScroll实例，而且还没等请求完成就重置了busy状态，这会引发不少bug。先把Factory调整一下：

.factory('iScroll', function($http) { 
  var iScroll = function(pre_url){ 
    this.items = []; 
    this.busy = false; 
    this.page = 1; 
    this.pre_url = pre_url; 
  } 
  iScroll.prototype.nextPage = function(){ 
    if(this.busy) return; 
    this.busy = true; 
    var url = this.pre_url + 'page='+this.page; 
    // 保存实例的this引用，避免回调里上下文丢失
    var self = this;
    $http.get(url).then(function(response){ 
      console.log(response.data); 
      for (var i = 0; i < response.data.length; i++){ 
        self.items.push(response.data[i]); 
        console.log("l..."); 
      } 
      // 只有请求成功完成后，才更新页码并解锁忙碌状态
      self.page++; 
      self.busy = false; 
    }).catch(function(error) {
      // 处理请求错误，同时重置忙碌状态，避免按钮永久禁用
      console.error('加载数据失败:', error);
      self.busy = false;
    }); 
  } 
  return iScroll; 
})

第二步：实现按钮点击初始化 #

接下来在控制器里注入Factory，创建实例，再绑定按钮的点击事件来触发首次数据加载：

控制器代码 #

.controller('MainController', function($scope, iScroll) {
  // 初始化iScroll实例，替换成你的API前缀地址
  $scope.scrollLoader = new iScroll('https://your-api-domain.com/api/data?');
  
  // 按钮点击触发的初始化函数（本质就是调用nextPage加载第一页）
  $scope.initScrollData = function() {
    $scope.scrollLoader.nextPage();
  };
})

视图（HTML）代码 #

在模板里添加按钮和数据展示区域：

<div ng-controller="MainController">
  <!-- 忙碌状态下禁用按钮，防止重复点击 -->
  <button ng-click="initScrollData()" ng-disabled="scrollLoader.busy">
    {{scrollLoader.busy ? '加载中...' : '初始化加载数据'}}
  </button>
  
  <!-- 展示加载出来的列表数据 -->
  <ul ng-if="scrollLoader.items.length > 0">
    <li ng-repeat="item in scrollLoader.items track by $index">
      {{item.title || item}}
    </li>
  </ul>
  <p ng-if="!scrollLoader.busy && scrollLoader.items.length === 0">暂无数据</p>
</div>

这样点击按钮就能初始化iScroll实例并加载第一页数据啦，而且还处理了错误状态和重复点击的问题～

内容的提问来源于stack exchange，提问作者EMRADE