Как правильно следить за объемом загрузки данных

0

Я создал пользовательскую директиву Angular, которая использует D3.js для создания визуализации. Я ссылаюсь на эту директиву в своем HTML так:

<gm-link-analysis data="linkAnalysis.connections"></gm-link-analysis>

Соответствующая часть кода директивы выглядит так:

angular.module('gameApp')
  .directive('gmLinkAnalysis', gmLinkAnalysis);

gmLinkAnalysis.$inject = ['$location', 'd3'];

function gmLinkAnalysis($location, d3) {

  var directive = {
    restrict: 'E',
    templateUrl: '/app/gmDataVis/gmLinkAnalysis/gmLinkAnalysis.directive.html',
    controller: 'LinkAnalysisController',
    controllerAs: 'linkAnalysis',
    scope: {
      data: '='
    },
    link: function(scope) {
      scope.$watch('data', function(json) {
        console.log(json);
        if (json) {
          root = json;
          root.fixed = true;
          root.x = width / 2;
          root.y = height / 2;
          return scope.render(root);
        }
      });

      ...

    }
  };
  return directive;
};

... и мой контроллер ниже:

angular.module('gameApp')
  .controller('LinkAnalysisController', LinkAnalysisController);

LinkAnalysisController.$inject = ['$routeParams', 'dataVisService'];

function LinkAnalysisController($routeParams, dataVisService) {
  var vm = this;
  var userId = $routeParams.userId;

  var getConnections = function() {
    dataVisService.getConnections({
      userId: userId
    }).$promise.then(function(connections) {
      vm.connections = connections;
      console.log(vm.connections);
    });
  };

  var init = function() {
    getConnections();
  };

  init();
}

Похоже, что моя директива загружается до того, как мой контроллер загружает данные. Я продолжаю видеть undefined (из моего журнала в директиве), за которым следует объект данных, который я ищу (из моего журнала в моем контроллере). Я понимаю, что директива будет загружаться до того, как мой асинхронный вызов API вернет данные в моем контроллере. То, что я не понимаю, - это то, почему $watch не получает эти данные, когда он наконец загружен. Как я могу получить эти данные в моей директиве?

  • 0
    В этом JSFiddle, который дал вам @heavyhorse, контроллер находился вне директивы. Теперь вы переместили его внутрь директивы. Вы дважды создаете экземпляр контроллера? Один раз вне директивы, а другой внутри директивы?
  • 0
    @georgeawg, я создаю его только один раз, внутри директивы.
Показать ещё 2 комментария
Теги:

1 ответ

0

Проблема может заключаться в том, что ваши часы недостаточно "глубоки". Чтобы смотреть весь объект, а не просто переменную, вы можете передать третий аргумент true функции $watch:

link: function(scope) {
  scope.$watch('data', function(json) {
    ...
  }, true);
    ...

Если вам не нужно $watchCollection можно использовать $watchCollection.

Дополнительная информация здесь

  • 1
    Я считаю, что в этом случае watchCollection может быть применено
  • 0
    @ Олег Тихонов, это правильно, фактически добавлял это в мой пост :), спасибо
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню