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>

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

Answer 1

运行异步代码时，需要让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