Question

我正在尝试使用angular-ui-tree来渲染树。当我拖动“baz”节点时，在“bar”节点下，我得到Uncaught TypeError: Cannot read property '$$phase' of null。将任何其他节点拖动到任何其他位置工作正常。

我不明白错误信息的含义。我是棱角分明的新人。

这是我的代码：

http://plnkr.co/edit/G3dHRluoAmjiTmPmBZr2?p=preview

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/JimLiu/angular-ui-tree/master/dist/angular-ui-tree.min.css">

    <style>
      .angular-ui-tree-placeholder {
          background: #f0f9ff;
          border: 2px dashed #bed2db;
      }
      .angular-ui-tree-handle {
          background: #f8faff;
          border: 1px solid #dae2ea;
          color: #7c9eb2;
          padding: 10px 10px;
      }

    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/JimLiu/angular-ui-tree/master/dist/angular-ui-tree.min.js"></script>
  </head>
  <body ng-app="treeApp">
    <div class="tree_section" ng-controller="treeCtrl">

      <!-- Nested node template -->

      <script type="text/ng-template" id="nodes_renderer.html">
        <div ui-tree-handle class="tree-node tree-node-content">
          {{id}} {{nodes[id].text}} {{nodes[id].child_ids}}
        </div>
        <ol ui-tree-nodes="" ng-model="nodes[id].child_ids">
          <li ng-repeat="id in nodes[id].child_ids" ui-tree-node ng-include="'nodes_renderer.html'"></li>
        </ol>
      </script>

      <div ui-tree id="tree-root">
        <ol ui-tree-nodes="" ng-model="top_ids">
          <li ng-repeat="id in top_ids" ui-tree-node ng-include="'nodes_renderer.html'"></li>
        </ol>
      </div>

      <p>top_ids: {{top_ids}}</p>

      <script>
      var treeApp = angular.module("treeApp", ['ui.tree']);

      treeApp.controller('treeCtrl', ['$scope',
        function($scope) {

          $scope.nodes = {
            '1': {
              'text': 'foo',
              'child_ids': ['2'],
            },
            '2': {
              'text': 'bar',
              'child_ids': [],
            }
          }
          $scope.top_ids = ['1']

          $scope.nodes['3'] = {
            text:'baz', child_ids:[]
          }
          $scope.nodes['1'].child_ids.push('3');
        }
      ]);

      </script>
    </div>
  </body>
</html>

Answer 1

andersManden在github问题上提供的解决方案似乎是可行的解决方案，

   $scope.safeApply = function(fn) {
      var phase = this.$root.$$phase;
      if(phase == '$apply' || phase == '$digest') {
        if(fn && (typeof(fn) === 'function')) {
          fn();
        }
      } else if(phase == null){ 
          fn();
      } else {
        this.$apply(fn);
      }
    };

Answer 2

我试图重现错误，但我无法重现，你可以粘贴你得到的确切错误吗？

Answer 3

我得到了同样的错误，在我的情况下，这是因为并非我的阵列中的所有项目都有一个＆＃34;孩子＆＃34;属性。一旦我为每个项添加了一个子数组（即使子数组为空），错误也会停止。希望这有帮助！

Answer 4

当只有一个父母和一个孩子并拖动父母一点时，我遇到了同样的错误。

树在一个带有ng-if的div中，当没有元素时，它从DOM中删除了树。

使用ng-show代替解决了我的问题。

angular-ui-tree拖动不起作用

4 个答案: