javascript - 如果从另一个指令调用，则当新数据传入时指令不会更新

Question

我已经开始在 ui-router 中使用指令:

$stateProvider
  .state('book', {
    abstract: true,
    url: '/:book',
    template: '<book-tabs />'
  })
  .state('book.about', {
    url: '',
    template: '<book-about />'
  })
  .state('book.stats', {
    url: '/statistics',
    template: '<book-stats />'
  });

这是指令之一:

  export default function(app) {
    app.directive('bookStats', function() {
      return {
        restrict: 'E',
        controllerAs: 'statsTab',
        templateUrl: 'book-stats.tpl.html',
        controller: 'BookStatsCtrl'
      };
    });
  };

在 book-stats 指令内部，我想调用 stats-list 指令并传递 book 对象，该对象一开始是空的，但是HTTP 请求完成后有数据:

var vm = this;
vm.book = {};
Book.get.single({bookId: id}).then(function(res) {
    vm.book= res; // there is data
    return res;
});

在模板中:

<stats-list book="statsTab.book"></stats-list>

这是 stats-list 指令:

export default function(app) {
  app.directive('statsList', function() {
    return {
      restrict: 'E',
      scope: {
        book: '='
      },
      templateUrl: 'stats-list.tpl.html',
      controller: 'CircleRankListCtrl'
    };
  });
};

初始化时，使用空的 book 对象作为参数调用 stats-list 指令，并且当 HTTP 请求完成并且 book 对象获取一些数据，但 stats-list 指令未更新。

当我尝试在回调中调用 $scope.$apply 时，出现 $digest has in Progress 错误。

我使用了 Angular 1.4.7，但我也尝试将其全部更改为 Angular 1.5 组件。

Answer 1

Miško Hevery 就这个问题做了很好的演讲 here ，您也可以在其他博客文章中找到解释的解决方案(例如 Courtney Robinson 的 this one)。

总结:如果你没有点，那么你就做错了。

问题:当 promise 兑现时，您的book key 将被分配一个新值...

Book.get.single({bookId: id}).then(function(res) {
  vm.book= res; // here
  return res;
});

因此，子指令中原始 book 参数的任何值都已在父指令 book 中被覆盖(并且不再绑定(bind)到)。

解决方案:是将 book 绑定(bind)到一个对象，并将该对象传递给子指令。这样，当该对象上的 book 键发生更改时，对包含对象的引用将保持绑定(bind)到父指令中的对象。

vm.statsObj.book = {};
Book.get.single({bookId: id}).then(function(res) {
  vm.statsObj.book= res; // there is data
  return res;
});

<stats-list stats-obj="statsTab.statsObj"></stats-list>

export default function(app) {
  app.directive('statsList', function() {
    return {
      restrict: 'E',
      scope: {
        statsObj: '='
      },
      templateUrl: 'stats-list.tpl.html',
      controller: 'CircleRankListCtrl'
    };
  });
};

然后在 stats-list.tpl.html 模板中，您对 book 的引用将仍然绑定(bind)到父指令中的书

{{statsObj.book}}