角数据问题-不确定如何排除故障

Question

我有一个控制器(下面的代码)，它链接到d3-cloud指令，工作非常完美。数据被添加到控制器中并传递给指令。

myApp.controller('DownloadsCloudCtrl', ['$scope', 
                                        '$rootScope', 
                                        'requestService',
                                        '$cookieStore',
  function($scope, $rootScope, requestService, $cookieStore){
  $scope.d3Data = [
    {
        'kword': 'a',
        'count': 141658,
    },{
        'kword': 'b',
        'count': 105465,
    }
  ];
}]);

现在，我试图通过将控制器切换到以下代码从JSON请求服务中提取数据。当我在console.log行下的控制器中执行一个$scope.d3Data = data时，一切似乎都正常工作(返回适当的数据)。

但是，当试图将控制器链接到指令时，某些东西中断了，出于某种原因，指令正在获得一个未定义/空数据集.。

我想知道这个问题是否在中，代码执行的顺序。也许控制器试图在JSON服务完成之前将数据传递给指令，因此没有绘制任何图形。这种情况会发生吗?如果是的话，我该如何解决呢？

myApp.controller('DownloadsCloudCtrl', ['$scope', 
                                        '$rootScope', 
                                        'requestService',
                                        '$cookieStore',
  function($scope, $rootScope, requestService, $cookieStore){
  $rootScope.$on('updateDashboard', function(event, month, year) {
    updateDashboard(month, year);
  });

  var updateDashboard = function(month, year) {
    requestService.getP2PKeywordData(month, year).then(function(data) {
      $scope.d3Data = data;
    });
  };

  updateDashboard($cookieStore.get('month'), $cookieStore.get('year'));
}]);

编辑:指令代码：

myApp.directive('d3Cloud', ['$window', 
                            'd3Service', 
                            'd3Cloud', 
                            function($window, 
                                     d3Service, 
                                     d3Cloud) {
  return {

    // Restrict usage to element/attribute
    restrict: 'EA',

    // Manage scope properties
    scope: {

      // Bi-directional data binding
      data: '=',

      // Bind to DOM attribute
      label: '@'
    },

    // Link to DOM
    link: function(scope, element, attrs) {

      // Load d3 service
      d3Service.d3().then(function(d3) {

        // Re-render on window resize
        window.onresize = function() {
          scope.$apply();
        };

        // Call render function on window resize
        scope.$watch(function() {
          return angular.element($window)[0].innerWidth;
        }, function() {
          scope.render(scope.data);
        });

        // Render d3 chart
        scope.render = function(data) {

        // d3 specific appends... not important

HTML代码：(足够简单)

  <div class="col-md-6">
    <div class="module">
      <div class="inner-module" ng-controller="DownloadsCloudCtrl">
        <div class="module-graph">
          <d3-cloud data="d3Data"></d3-cloud>
        </div>
      </div>
    </div>
  </div>

Answer 1

尝试在$scope.$apply= $scope.d3Data之后添加一个$scope.d3Data()；

$scope.d3Data = data;
$scope.$apply();

如果这不起作用，您可以始终将一个函数向下传递到指令中，并将其设置为更新数据，然后从控制器手动调用它：

所以控制器逻辑：

$scope.updateDirective = function () {}; // this will be overridden in directive

指令逻辑：

scope: {
  data: '=',
  update: '&updateDirective'
  label: '@'
}

scope.updateDirective = function () {
  scope.render(scope.data); // call to update function
};

标记：

  <div class="col-md-6">
    <div class="module">
      <div class="inner-module" ng-controller="DownloadsCloudCtrl">
        <div class="module-graph">
          <d3-cloud data="d3Data" update-directive="updateDirective"></d3-cloud>
        </div>
      </div>
    </div>
  </div>