angular-ui-tree drag not working

Question

I'm trying to use angular-ui-tree to render a tree. When I drag the "baz" node, under the "bar" node I get Uncaught TypeError: Cannot read property '$$phase' of null. Dragging any other node to any other location works fine though.

I don't understand what the error message means. I'm new to angular.

Here is my code:

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>

Shahroon · Accepted Answer · 2015-03-12 07:59:23Z

2

Solution provided by andersManden at github issues seems to be the working solution,

   $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);
      }
    };

answered Mar 12, 2015 at 7:59

Shahroon

3073 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jesse Aldridge Over a year ago

Link to the comment mentioned: github.com/angular-ui-tree/angular-ui-tree/issues/…

dzg · Accepted Answer · 2015-01-20 21:06:45Z

0

I was getting the same error, and in my case it was because not all of the items in my array had a "children" property. Once I added a children array to every item (even if the children array was empty) the error stopped. Hope this helps!

answered Jan 20, 2015 at 21:06

dzg

1

Comments

jbetancourt · Accepted Answer · 2015-02-08 21:23:03Z

0

I had the same error when having only one parent with a child and dragging the parent a little bit.

The tree was inside a div with an ng-if which removed the tree from the DOM when there were no element.

Using ng-show instead solved my issue.

edited Feb 8, 2015 at 21:23

answered Feb 8, 2015 at 20:46

jbetancourt

11 bronze badge

Collectives™ on Stack Overflow

angular-ui-tree drag not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related