AngularJS中数据与UI绑定失败问题排查（含DataTables场景）

我帮你找出了几个导致数组和successMessage无法绑定到UI的核心问题，咱们逐一分析：

• 错误地将数组转为字符串
  在请求成功的回调里，你执行了这行代码：

  $scope.accNum = JSON.stringify($scope.accNum);
  

  ng-repeat指令需要遍历数组类型的数据，你把原本的数组转成JSON字符串后，rows in accNum根本无法遍历出有效数据，自然没法渲染到表格里。解决方法是直接删掉这行代码，让$scope.accNum保持数组类型。

• 路由跳转导致控制器重新实例化
  你的路由配置里，firstRes状态的控制器是mobileNumberCtrl，当你在请求成功后调用$state.go('firstRes')时，AngularJS会重新创建一个mobileNumberCtrl的实例。原来的$scope里的accNum和successMessage都是属于旧实例的，新实例的$scope是空白的，所以新页面根本拿不到这些数据。
  解决这个问题可以有几种思路：

  • 把需要共享的数据（比如accNumList、successMessage）存到$rootScope里（不过更推荐用自定义服务来共享数据，避免污染rootScope）；
  • 调整路由逻辑，不需要跳转页面就能展示结果，或者把数据通过路由参数传递；
  • 分开控制器，不要让跳转前后的页面复用同一个控制器。

• successMessage绑定失效的根源
  这个问题其实和上面的控制器重新实例化是同一个原因：旧控制器实例里的$scope.successMessage在跳转到新页面后，新的控制器实例根本没有这个变量，所以UI自然绑定不上。按照上面的共享数据方案就能解决。

另外给你个小优化建议：getAccNum函数里的循环可以用数组的map方法简化，代码更简洁：

$scope.accNum = $rootScope.accNumList.map(item => ({ ID: item }));

这样就不用手动循环push对象了。

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