Question

我将以下代码作为指令。我试图将scope从控制器传递给这个指令，它似乎正确地传递它（console.log(scope);工作正常）。但是，当我尝试访问scope.data属性时，它看起来应该在console.log scope中返回一个数组，它会返回undefined。为什么会这样，我该如何解决这个问题？

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) {

        // Create svg variable
        var svg = d3.select(element[0])
          .append('svg')
          .style('width', '100%')
          .append('g');

        // 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() {

          // Works fine!
          console.log(scope);

          // Returns undefined!
          console.log(scope.data)

          scope.render(scope.data);
        });
        ...

添加了HTML：

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

重要编辑：

这个问题越来越棘手了。我只是刷新了页面，它完全抓住了数据。再次刷新并再次收到undefined。我将尝试将变量名称从数据更改为其他内容。

编辑＃2：

尝试更改变量名称，它似乎不识别除data以外的任何参数......很奇怪......

Answer 1

问题：

该指令在http服务加载完数据之前加载。

解决方案：

添加ng-if条件以确保在启动指令之前已加载数据。

<强>标记：

<div class="module-graph" ng-if="dataLoaded">
  <d3-cloud data="d3Data"></d3-cloud>
</div>

在控制器内：

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

角度访问范围属性

重要编辑：

1 个答案:

问题：

解决方案：