ES6 Promise not Updating AngularJS DOM [duplicate]

Question

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="[email protected]" 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="[email protected]" 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.

Junco

Answer 1

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="[email protected]" 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

Powys

How come I don't need to do so with controllers? I can simply do $scope.data = "Hello World" without need of $scope.apply – Junco

You can't in your provided example. Assigning properties to either $scope or this asynchronously without Angular knowing it, will not trigger a $digest. AngularJS usually calls the $apply function for you when you use ng-click, $http callbacks etc, but those are Angular builtins. – Powys

i was trying it out on a module.controller, passed it down with a binding to the component (e.g. <my-component data="data"></my-component>) and there was no need for $scope.$apply, although if I isolate the controller it doesn't work and I do need it. – Junco

Answer 2

Use $q.when to convert ES6 promises to AngularJS promises

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc...¹ Since the promise comes from outside the AngularJS framework, the framework is unaware of changes to the model and does not update the DOM.

Use $q.when to convert the external promise to an AngularJS framework promise:

function myComponent(){
  ̶P̶r̶o̶m̶i̶s̶e̶.̶r̶e̶s̶o̶l̶v̶e̶(̶)̶.̶t̶h̶e̶n̶(̶_̶ ̶=̶>̶ ̶{̶
  //USE $q.when
  $q.when(Promise.resolve()).then(_ => {
    this.data = 'Hello World';
  });
}

Use $q Service promises that are properly integrated with the AngularJS framework and its digest cycle.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

— AngularJS $q Service API Reference - $q.when

Calabresi