Javascript Angularjs的异步API请求

我有两个文件foo.js和foo.html

在foo.js中，我从一个API获取信息，我假设它是异步的，foo.html可以访问该对象

  <tr data-ng-repeat="y in vm.apidata">
                                    <td>{{y.name}}</td>
                                    <td>{{y.is_closed}}</td>
                                </tr>

但在这里我什么也看不见。代码显示这一点没有错，我将信息作为对象数组

我正确地从API获取信息，但是vm.apidata没有初始化，所以我可以在foo.html中显示它

---

我如何确保它已显示？

这听起来像是$apply和/或$watch的工作-一个示例线程可能是这一个

@Aqsan，我将在回答中写下这一点，因为它对于评论来说太冗长了

我的假设是，您必须在外部代码完成其任务时调用$scope。$digest/$apply，或者在感兴趣的scope对象vm.apidata发生变异时调用

重要提示：Angular希望vm.apidata是范围对象。简单地放入全局窗口/自作用域并不是标记所引用的内容

window.vm.apidata！=scope.vm.apidata

如果确实正确更新了作用域节点，则可以使用相同的作用域引用调用作用域。$apply

然而，如果你不在下面，下面是一些信息。 阅读更多关于

您可以将引用注入$rootScope，它是您的服务提供者、工厂、控制器和指令中的顶级根范围。类似地，$scope of hierarchy interest在控制器和指令中是相关的，并且可以在那里注入，因此作用域对象在父子层次结构中继承下来，但可以在自定义指令或ng repeat指令中实现的隔离作用域除外。为了简单起见，我将为您提供一个控制器的框架，您可以将实现连接放在其中：

var myModule = angular.module('myModule', []);

// This is a Service
// observe how you inject the root scope
// the array wrapper around the factory is for JS code minification protection which might name your parameter to something shorter and make it invalid (AngularJS-wise)
myModule.factory('retrieveService', ['$rootScope', '$q', function($rootScope, $q) {
  function retrieve(){

    // perhaps return a promise using the injected (light-weight) angular $q service
    var deferred = $q.defer();

    // Your external code can go in here for retrieval
    // When your async code complete call for success
    deferred.resolve(<yourapidata>);

    // alternatively for error
    deferred.reject(<yourerror>);

    // of course you could also just set the value to the $rootScope.vm.apidata here and call $apply
    $rootScope.vm.apidata = <yourapidata>;
    $rootScope.$apply();


    return deferred.promise;

  }
  return retrieve;
  }]);

// This is a Controller
myModule.controller('MyCtrl', ['$rootScope', '$scope', 'retrieveService', '$q', function(rootScope, $scope, retrieveSvc, $q) {

  function retrieve(){
    // Your external code could go in here inside the controller too
    // upon async retrieval perhaps...
    $scope.vm.apidata = <yourvalue>
  }
  // given you take care of your async call using promises and/or callbacks
  retrieveService().then(function(apidata) {
    $scope.vm.apidata = apidata;
    // though $scope is recommended imho, alternatively
    // you could bind the vm.apidata to $rootScope (here or in your service) as well which $scope will inherit
    $rootScope.vm.apidata = apidata;
  });

}])

---

有很多东西需要学习/扩展，而且排列非常广泛，但希望这能为您提供一个良好的总体方向。根据您的后端api，角度服务可能是一个不错的选择

像var vm={}一样声明vm；vm.apidata=[]我们可以看到ControllerMember的javascript吗？请记住，如果异步数据检索代码在Angular循环之外，则必须专门调用scope。$digest/$apply来警告Angular，以触发对更改的脏检查。Angular控制UI的整个回流，可能不知道外部非Angular JavaScript引入的更改。@cbayram，我正在寻找$apply，但我不确定在这种情况下如何实现它。我是一个新手，您在hat主题中给出的示例对我来说太复杂了，以至于我无法在这种情况下解决它，不是以这种方式，而是再次使用$scope。$scope.apidata从api异步返回后，$scope.$apply已完成。然后我可以在ui中看到返回的数据。谢谢