AngularJS模块在放入promise中时出错

AngularJS modulerr when placed inside promise

本文关键字：出错 promise 模块 AngularJS      更新时间：2023-09-26

AngularJS nOb在此处。我有一个从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应用程序控制器移动到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"];  
 });

我做错了什么？

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

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

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

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

您可以使用以下代码：

服务.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);  
 });

在这种情况下，您希望使用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>

相关文章：