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'
    };
  });
};

初始化时，使用空stats-list对象作为参数调用book指令，并且当满足HTTP请求并且book对象获取一些数据时，stats-list 1}}指令不会更新。

当我尝试在回调中拨打$scope.$apply时出现$digest already in progress错误。

我使用了Angular 1.4.7，但我也试图将它全部改为Angular 1.5组件。

Answer 1

MiškoHevery谈论了这个问题here，您也可以在其他博客文章中找到解决方案（如Courtney Robinson的this one）。

摘要：如果你没有点，那你做错了。

问题：当履行承诺时，您的book密钥被分配了一个新值...

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

因此，原始book参数在子指令中的值已被覆盖（并且不再绑定到）父指令book。

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

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的引用将继续绑定到父指令中的书

{{statsObj.book}}

如果从另一个指令

1 个答案: