javascript - Angular 数据问题 - 不知道如何解决

Question

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

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

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

但是，当尝试将 Controller 链接到指令时，由于某种原因，指令获取了未定义/空数据集。

我想知道问题是否出在代码执行的顺序上。也许 Controller 尝试在 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.d3Data = data; 之后添加 $scope.$apply();

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

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

所以 Controller 逻辑:

$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>