Question

我目前正在尝试在JSTree插件上显示一些简单的父/子树数据。我的数据是通过我的控制器从API中提取的：

angular.module('App')
.controller('GroupsCtrl', ['$scope', 'API', function($scope, API) {
  /**
   * Return the list of all groups
   */
  $scope.getAll = function() {
    API.group.query({ element: 'all', json: 'jtree' }, function(groups) {
      $scope.groups = groups;
    });
  }
}]);

数据看起来像这样：

[
  { id: "1", parent: "#", text: "parent" },
  { id: "2", parent: "1", text: "child" },
  ...
]

在我的指示中，这就是我所做的：

angular.module('App')
.directive('edTree', function() {
  return {
    restrict: 'E',
    scope: {
      edTreeData: '='
    },
    link: function(scope, element, attrs) {
      element.jstree({
        'core': {
          'data': scope.edTreeData
        }
      });
    }
  };
});

在我看来：

<ed-tree ed-tree-data="groups"></ed-tree>

我从服务器正确接收数据。在做的时候：

console.log(scope);

在指令内部，我可以看到edTreeData范围变量填充了一个对象数组（从服务器检索到的对象）：

...
$parent: a.$$childScopeClass.$$childScopeClass
$root: k
edTreeData: Array[26]
this: k
...

但是，当我试图直接在指令中访问它时：

scope.edTreeData

我有一个未定义的值。是否有人面临同样的问题？

Answer 1

您的数据异步撤消。在您的指令执行时，服务器很可能没有响应。因此，您需要设置一个等待数据可用的手表：

这是更新的链接功能：

link: function(scope, element, attrs) {
    var unwatch = scope.$watch('edTreeData', function (nv) {
        if (!nv) {
            return;
        }
        element.jstree({
            'core': {
                'data': scope.edTreeData
            }
        });
        unwatch();
    });
}

Angular指令未定义现有范围

1 个答案: