Javascript AngularJS Moduler当置于promise内时

AngularJS nOOb在这里。我有一个从DynamoDB获取数据的函数。此函数的结果需要填充到HTML选择列表中

以下是相关的HTML：

<div ng-app="myapp">
 <div ng-controller="myctrl">
  <select ng-model="roadname" ng-options="x for x in roadNames"></select>           
 </div>
</div>

如果我将angular app controller移动到promise函数之外，则不会出现错误，并且表单内容会被填充：

这是在工作：

var function_AWS_get = new Promise(function(resolve, reject) {
  resolve(get_result_array);
 } // End of Function

// Call the Function with promise. But, move angular code outside the promise
function_AWS_get.then( function(result) {
 }, function(err) {
      $scope.roadNames = ["Error"];
  });

var app = angular.module('myapp', []);
   app.controller('myctrl', function($scope) {   
   $scope.roadNames = ["Success"];  
 });

我做错了什么

var app = angular.module('myapp', []);
   app.controller('myctrl', function($scope) {   
   $scope.roadNames = ["Success"];  
 });

你必须让你的角度模块在所有功能之外。这是你的角度模块的起始点，它不应该在任何承诺/功能之内

---

在控制器内部进行ajax调用并呈现结果

在这种情况下，您需要使用以下方法手动引导应用程序：

检查下面的简单演示

var get_result_array=['One'，'Two'，'Three']； var function\u AWS\u get=新承诺函数解析、拒绝{ resolveget_结果_数组； }; //使用promise调用函数并将数据填充到表单中 函数 .catchfunction{ 返回[错误] } .Then函数结果{ var-app=angular.module'myapp'，[]； 应用程序控制器'myctrl'，函数$scope{ $scope.roadNames=结果； }; //引导应用程序 angular.bootstrapdocument.querySelector'myapp'，[app.name] };

---

如果您尝试在内部注册angular controller，则您将永远无法访问响应对象，这就是$scope.roadNames未初始化的原因。这也是在所有功能之外注册所有控制器/服务/指令的最佳实践。 始终编写angular服务，并将负责与服务器交互的代码放在那里

您可以使用以下代码：

Service.js 控制器

---

回答得好。@Anand还有一个问题：不确定你是否简化了这个问题的代码。但最好的做法是将应用程序、ctrl和服务AWS_get功能放在单独的文件中。谢谢@Piyush.kapoor。如何确保角度控制器仅在从另一个函数接收结果后才设置值？在角度控制器中，您可以启动http调用$http.get'/files/hhh'。然后函数响应{//set scope value here$scope.roadNames=response}；您可以在线检查语法，它非常简单的$http是方法。在本例中，数据不是http源，它来自DynamoDB。我现在尝试在角度控制器中插入AWS承诺，并且它可以工作。这是我的更新代码：var-app=angular.module'myapp'，[]；app.controller'myctrl'，函数$scope{$scope.roadNames=[Loading…]；函数_AWS_get.then函数result{$scope.roadNames=result；}，函数err{}；}；这在某种程度上可以工作，但只有在访问了一次选择框之后才能获取内容

var app = angular.module('myapp', []);
   app.controller('myctrl', function($scope) {   
   $scope.roadNames = ["Success"];  
 });

// Call the Function with promise and populate data in to the FORMs
function_AWS_get
  .catch(function() {
    return ["Error"];
  })
  .then(function(result) {

    var app = angular.module('myapp', []);
    app.controller('myctrl', function($scope) {
      $scope.roadNames = result;
    });

    // Bootstrap the app
    angular.bootstrap(document.querySelector('#myapp'), [app.name])
  });

app.service('MyService', function() {
  var function_AWS_get = new Promise(function(resolve, reject) {
    resolve(get_result_array);
  };

  this.getRoadNames = function(successHandler, failureHandler) {
    function_AWS_get.then( function(result) {
       successHandler(result);  
    }, function(err) {
       failureHandler(err);
    }); 

  };
});

app.controller('myctrl', function($scope, MyService) {   
   function fetchRoadlistSuccessHandler(response) {
     $scope.roadNames = response; 
   }

   function fetchRoadlistFailureHandler(err) {
     $scope.roadNames = err;
   }

   MyService.getRoadNames(fetchRoadlistSuccessHandler, fetchRoadlistFailureHandler);  
 });