AngularJS承诺解析直到下一次用户交互才更新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更新方式的问题。

更新：

MyService代码：

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表示浏览器支持的本机承诺。 您还可以对本机.then使用.then语法。

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

当您使用来自$q服务的承诺时（例如，当您使用$http ），您不必担心摘要周期，因为在满足承诺时将为您运行摘要。 但是，如果您在AngularJS中使用本机Promise，则通常必须手动运行摘要循环。