javascript - Angular 访问范围属性

Question

我有以下代码作为指令。我试图将 scope 从 Controller 传递到该指令，并且它似乎正确传递它(console.log(scope); 工作正常)。但是，当我尝试访问 scope.data 属性时，它看起来应该在 console.log 中为 scope 返回一个数组，它返回未定义。这是为什么？我该如何解决这个问题？

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。我将尝试将变量名称从 data 更改为其他名称。

编辑#2:

尝试更改变量名称，但它似乎无法识别除data之外的任何参数...奇怪...

Answer 1

问题:

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

解决方案:

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

标记:

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

在 Controller 内:

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