Question

我正在尝试使用ES6 Promise（fetch）解析值从其控制器更新角度视图。事情是Angular在我的诺言结算时没有更新视图，这是可以理解的。这是一种广播应用程序。这是代码。

控制器：

angular.module('myApp').controller('MyCtrl', [
  'myPlayer', 'radio', function(player, radio) {

    // Some initilization

    this.next = function() {
      this.currentSong = this.upcomingSong;
      radio.nextSong().then(song => {
        this.upcoming = song;
      });
    };

我的观点如下：

<img ng-src="{{player.upcomingSong.imgUrl}}" alt="{{player.upcomingSong.name}}">
<div>
    <p>{{player.upcoming.title}}</p>
    <p>{{player.upcoming.artist}}</p>
</div>

我搜索了文档和几个问题和文章，但这些看起来比它们应该更复杂，因为我认为我遗漏了一些基本的东西。

实施此方法的正确方法是什么？

感谢。

Answer 1

通过使用ES6承诺，您将离开角度范围。这意味着角度不知道他的组件内部发生了什么变化。

你能做的是

angular.module('myApp').controller('MyCtrl', [
  'myPlayer', 'radio', '$timeout', function(player, radio, $timeout) {

    // Some initilization

    this.next = function() {
      this.currentSong = this.upcomingSong;
      radio.nextSong().then(song => {
        $timeout(() => {
          this.upcoming = song
        }, 0);
      });
    };

使用$timeout服务可以让角度知道您所做的更改。

我不推荐这个解决方案。我认为你应该使用$http承诺来避免留下角度范围。

AngularJS - Promise解析和更新视图

1 个答案: