ES6 Promise 不更新 AngularJS DOM

Question

我无法理解角度分量范围。如果我做类似的事情：

function myComponent(){
  this.data = 'Hello World';
}

let myModule = angular.module('myModule', []);

myModule.component('myComponent', {
  template: `<div>{{$ctrl.data}}</div>`,
  controller: myComponent
});

    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myModule">
  <my-component></my-component>
</div>

它打印得很好......现在，如果我做一个小的修改并使其异步：

function myComponent(){
  Promise.resolve().then(_ => {
    this.data = 'Hello World';
  });
}

let myModule = angular.module('myModule', []);

myModule.component('myComponent', {
  template: `<div>{{$ctrl.data}}</div>`,
  controller: myComponent
});

<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myModule">
  <my-component></my-component>
</div>

它不打印任何东西。我可以使用点击处理程序更改该值，但对于 http 和其他异步操作，它不起作用。

Answer 1

用于$q.when将 ES6 Promise 转换为 AngularJS Promise

\n\n

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 分为经典执行上下文和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才会受益于 AngularJS 数据绑定、异常处理、属性监视等... ¹由于 Promise 来自 AngularJS 框架外部，因此框架不知道模型的更改，并且会执行以下操作：不更新 DOM。

\n\n

用于$q.when将外部 Promise 转换为 AngularJS 框架 Promise：

\n\n

function myComponent(){\n  \xcc\xb6P\xcc\xb6r\xcc\xb6o\xcc\xb6m\xcc\xb6i\xcc\xb6s\xcc\xb6e\xcc\xb6.\xcc\xb6r\xcc\xb6e\xcc\xb6s\xcc\xb6o\xcc\xb6l\xcc\xb6v\xcc\xb6e\xcc\xb6(\xcc\xb6)\xcc\xb6.\xcc\xb6t\xcc\xb6h\xcc\xb6e\xcc\xb6n\xcc\xb6(\xcc\xb6_\xcc\xb6 \xcc\xb6=\xcc\xb6>\xcc\xb6 \xcc\xb6{\xcc\xb6\n  //USE $q.when\n  $q.when(Promise.resolve()).then(_ => {\n    this.data = \'Hello World\';\n  });\n}\n

\n\n

使用与 AngularJS 框架及其摘要周期正确集成的 $q 服务承诺。

\n\n

\n

$q.when

\n\n

将可能是值或（第 3 方）then-able Promise 的对象包装到 Promise 中$q。当您处理的对象可能是也可能不是承诺，或者承诺来自不可信的来源时，这非常有用。

\n\n

— AngularJS $q 服务 API 参考 - $q.when

\n

\n

Answer 2

当您运行异步代码时，您需要让 Angular 知道某些内容已更新。这使得 Angular 运行一个 $digest 循环，检查是否有任何绑定需要更新。

为此，请将您的作业包装在对 的调用中$scope.$apply()。

function myComponent($scope){
  Promise.resolve().then(_ => {
    $scope.$apply(() => {
      this.data = 'Hello World';
    });  
  });
}

let myModule = angular.module('myModule', []);

myModule.component('myComponent', {
  template: `<div>{{$ctrl.data}}</div>`,
  controller: myComponent
});

<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myModule">
  <my-component></my-component>
</div>

请注意，我$scope不仅在函数体中添加，而且还作为函数参数添加。

阅读更多关于$scope.$apply和$scope.digest