Question

我已经构建了一个自定义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在最终加载时没有获取这些数据。我如何将这些数据输入我的指令？

Answer 1

问题可能在于您的手表不是很深的＆＃39;足够。要观察整个对象，而不仅仅是变量，您可以将第三个参数true传递给$watch函数：

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

如果没有必要一直深入，可能会使用$watchCollection。

更多信息here

如何正确观察数据加载范围

1 个答案: