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

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

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

AngularJS承诺解决方案直到下一次用户交互时才更新GUI

1 个答案: