javascript-ES6 Promise不更新AngularJS DOM

这个问题已经在这里有了答案：            >            Can’t get ES6 promise value to display in AngularJS view                                    1个
我在了解角度分量范围时遇到麻烦.如果我做类似的事情：

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>

它不会打印任何内容.我可以使用点击处理程序thouogh来更改值,但是对于http和其他异步操作而言,它将无法正常工作.

解决方法:

运行异步代码时,需要让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,而且还将其作为函数参数添加了.

Read more about $scope.$apply and $scope.digest

标签：angularjs,es6-promise,javascript,angular-promise
来源： https://codeday.me/bug/20191111/2021980.html