javascript - AngularJS promise 解析在下一次用户交互之前不会更新 GUI

Question

我在 AngularJS 中使用 Angular2 风格的组件。在我的组件中，我有一个函数旨在通过更改下拉列表的选项来更新 GUI:

    var ctrl = this;
    async function updateOptions(node) {
          var name = node.name;
          let result = await MyService.getResult(name);
          ctrl.options = result;
          console.log(ctrl.options); 
    }

显示这些选项的相应 HTML 是:

  <select ng-if="$ctrl.getType() === 'dropdown'"
    class="form-control selectList"
    ng-model="$ctrl.value"
    ng-options="option.key as option.displayName for option in $ctrl.options">
  </select>

其中 getType() 始终返回 'dropdown'。

下拉菜单开始为空白。用户从下拉列表中选择一个选项。控制台正确记录选项和下拉列表更新。用户从下拉列表中选择另一个选项。控制台再次正确记录选项。但这一次，下拉菜单没有更新。随后的所有时间，下拉列表都会显示用户之前选择的选项。

期待一些好的侦探作品。很高兴提供这个大型项目的更多代码片段。我想知道这是否是 AngularJS 更新方式的问题。

更新:

我的服务代码:

this.getResult = function(name) {
  return myFactory.getStuff(name).then(
    function(response) {
      return response.result.map(...);
    }
  );
};

MyFactory代码:

myFactory.getStuff = function(name) {
  return $http.get('/url/here/' + name)).then(
      function(response) {
        return response.data;
      }
    );
};

Answer 1

await 用于浏览器支持的 native promise 。您还可以在 native Promise 上使用 .then 语法。

但是 AngularJS 使用来自 $q 服务的自己的 promise 。因此，您需要使用 .then 语法，因为浏览器不知道这些 promise 。

当您使用 $q 服务中的 promise 时(例如，当您使用 $http 时)，您不必担心摘要周期，因为摘要的运行时间为当 promise 兑现时的你。但是，如果您在 AngularJS 中使用 native Promise，则通常必须手动运行摘要循环。