Angular JS - 从异步操作返回结果

Question

Angular JS - 1.6.9

我已经在这方面工作了几个小时，坦白说，我对 Angular JS 没有很熟练，希望得到一些指导。

我有一个元素，每次在表单中的字段中更新信息时，它将使用这些字段中的信息更新“预览窗格”，读取模板文件并替换值，将该信息打印到所述预览窗格。 （注意：现在，每次每个字段以任何方式更新时，我都会阅读，我知道这很糟糕，稍后在我开始工作后，我将致力于缓存。所以，我不会在这方面寻求帮助部分，因为我知道我必须解决这个问题，稍后会解决。）

我已经尝试了很多方法，这是最近的一次尝试，经过几个小时的摆弄，我的控制台不断得到

undefined

。

我非常有信心这确实与我对异步事物的绝对误解有关。

我在 fillTemplate() 中有调试信息，它确实成功读取了文件，只是它没有到达浏览器。

HTML：

<div class="col text-monospace small shadow p-2 mb-2 pre-scrollable">
    {{updateItemInformation()}}
</div>

var app = angular.module('app', ['ngSanitize']);
app.controller('c', ($scope, $sce) => {
    $scope.updateItemInformation = async () => {
        let result ;

        const maxLineLength = 80;

        result = await fillTemplate($scope.item) ;

        console.log(result) ;

        return result ;
    };

    async function fillTemplate(item) {
        let result = "";

        const response = await fetch(`./templates/${item.category}.template`)
        const template = await response.text()

        if(!template) return "";

        return template ;
    }

Answer 1

AngularJS 本身并不支持使用现代 JavaScript 框架中常用的 async/await 语法进行异步编程。使用

$q

服务构建 Promise，使用

$http

构建 XMLHttpRequest。

以下示例只是关于以 AngularJS 方式构建 Promise（异步调用）的一般参考。这不是字面上的解决方案。

var app = angular.module('app', ['ngSanitize']);
app.controller('c', ($scope, $sce, $http, $log) => {
  $ctrl.$onInit = () => {
    $scope.template = '';
    $scope.updateItemInformation = updateItemInformation;
  }

  function updateItemInformation() {
    fillTemplate($scope.item)
      .then(response => {
        $scope.template = response;
      })
      .catch(error => {
         $log.error(error)
      });
  }

  function fillTemplate(item) {
    const _deferred = $q.defer();
    $http.get(`./templates/${item.category}.template`)
      .then(response => {
        if (!response) _deferred.reject('Template not found');
        _deferred.resolve(response)
      })
      .catch(error => {
        _deferred.reject(error)
      })
    return _deferred.promise;
  }
}