Question

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

以下相关HTML：

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

这里的相关失败JS：

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

// Call the Function with promise and populate data in to the FORMs
function_AWS_get.then( function(result) {
  var app = angular.module('myapp', []);
  app.controller('myctrl', function($scope) {   
    $scope.roadNames = result;  
   });
 }, function(err) {
     $scope.roadNames = ["Error"];
   });

如果我将angular app控制器移到promise函数之外，那么就没有错误，并且表单内容会被填充：

这是有效的JS：

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"];  
 });

我做错了什么？

Answer 1

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

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

在控制器内部进行ajax调用并渲染结果

Answer 2

在这种情况下，您希望使用angular.bootstrap方法手动引导应用程序：

// 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])
  });

查看下面的简单演示。

var get_result_array = ['One', 'Two', 'Three'];
var function_AWS_get = new Promise(function(resolve, reject) {
  resolve(get_result_array);
});

// 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])
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div id="myapp">
  <div ng-controller="myctrl">
    <select ng-model="roadname" ng-options="x for x in roadNames"></select>
  </div>
</div>

Answer 3

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

您可以使用以下代码：

Service.js

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);  
 });

当置于promise中时，AngularJS modulerr

3 个答案:

Service.js

控制器