ES6 承诺不更新 AngularJS DOM [英] ES6 Promise not Updating AngularJS DOM

问题描述

我无法理解角度组件的作用域.如果我做这样的事情:

function myComponent(){this.data = '你好世界';}让 myModule = angular.module('myModule', []);myModule.component('myComponent', {模板:`<div>{{$ctrl.data}}</div>`，控制器: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"><我的组件></我的组件>

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

function myComponent(){Promise.resolve().then(_ => {this.data = '你好世界';});}让 myModule = angular.module('myModule', []);myModule.component('myComponent', {模板:`<div>{{$ctrl.data}}</div>`，控制器: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"><我的组件></我的组件>

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

解决方案

当你运行异步代码时，你需要让 Angular 知道某些东西已经更新.这使得 angular 运行一个 $digest 循环，检查是否有任何绑定需要更新.

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

function myComponent($scope){Promise.resolve().then(_ => {$scope.$apply(() => {this.data = '你好世界';});});}让 myModule = angular.module('myModule', []);myModule.component('myComponent', {模板:`<div>{{$ctrl.data}}</div>`，控制器: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"><我的组件></我的组件>

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

详细了解 $scope.$apply 和 $scope.digest

I'm having trouble understanding angular components scope. If I do something like:

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>

It prints it just fine... Now, if I do a small modification and make it async:

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>

It doesn't print anything. I can change the value with click handlers thouogh, but for http and other async operations it won't work.

解决方案

When you run asynchronous code, you need to let Angular know that something has updated. This makes angular run a $digest cycle, checking if any bindings need updating.

To do this, wrap your assignment in a call to $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>

Notice that I added $scope not only in the function body, but also as a function parameter.

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

这篇关于ES6 承诺不更新 AngularJS DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！