AngularJS ui-router调用Node.js API后响应无法渲染至HTML视图

看起来你遇到的问题是接口返回的数据已经能在控制台打印出来，但就是没法在视图里渲染出来。结合你的代码，我帮你梳理几个最可能的原因和对应的解决办法：

1. 路由未关联控制器（最常见原因） #

你的statetwo路由配置只指定了模板路径，但没有把formController和这个状态绑定起来。这就导致视图根本不知道要使用这个控制器里的$scope变量，自然显示不出来。

修改你的路由配置，添加controller属性：

.state('statetwo', {
  url: '/statetwo',
  templateUrl: appHelper.templatePath('tables/basic'),
  controller: 'formController' // 加上这一行，绑定控制器
})

也可以在模板里通过ng-controller="formController"指令绑定，但更推荐在路由里配置，符合ui-router的最佳实践。

2. 确认作用域与数据结构的正确性 #

先在视图里打印整个getdata2对象，看看是否能正常获取：

<p>{{getdata2}}</p>

如果能打印出完整对象，再检查Result属性的拼写是否完全一致（AngularJS对大小写敏感）；如果连getdata2都打印不出来，那基本还是控制器没绑定对的问题。

3. 检查表单提交的触发逻辑 #

确保你的表单提交按钮正确调用了alldata函数，比如：

<form ng-submit="alldata(form)">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

或者按钮用ng-click="alldata(form)"，确保函数确实被执行了。

4. 异步更新的特殊处理（备选） #

虽然$http的回调默认会触发Angular的digest周期，但如果遇到特殊情况（比如嵌套了非Angular原生的异步操作），可以手动触发更新：

$http.post("http://localhost:4000/login", dataObj)
  .then(function(response) {
    $scope.$apply(function() {
      $scope.getdata2 = response.data;
    });
    console.log($scope.getdata2);
  })

不过这个方案优先级低于前面的，先解决控制器绑定问题再考虑这个。

先试试第一个方案，这应该是最可能解决你问题的方法，如果还是不行再逐一排查后面的点。

内容的提问来源于stack exchange，提问作者Ehtasham ul haq