ui-tree-node not draggable & Error Cannot read property '0' of null

Question

I'm getting this error; Cannot read property '0' of null (for '0', '1', '2', '3'.....etc.) once for each of the 24 hours in my day. Then again for rows '8', '9','10' and '11' where I have events on the calendar.

This is my Calendar Day View template

<table ui-tree="treeOptions">
    <tbody>
    <!-- Builds Day View with one <tr> for each hour(24 hrs) in rows model --> 
    <tr ng-repeat="tm in rows track by $index" ng-model="rows" ui-tree-nodes="">
        <td class="calendar-cell" ui-tree-node>
            <!-- hourTouch() counts the touch events, once shows <p>Signup</p>, twice  -->
            <!-- shows <div class="finish-time"> which is my draggable element -->
            <!-- tm.events is an array of objects with the event detail properties -->
            <div class="add_event_shade" 
                    ng-if="tm.events" 
                    on-touch="hourTouch($event)"
                    ng-model="tm.events"
                    ui-tree-nodes="">
                <p style="display:none;" 
                     ng-model="volunteerStart">
                     Signup
                </p>
                <div class="finish-time"
                        style="display:none";
                        ui-tree-node>
                        Finish: {{ displayEnd}}
                </div>
            </div>
            <div ng-class="{'calendar-event-wrap': tm.events}"
                    ng-show="tm.events">
                <!-- adds events to the calendar day view -->
                <div ng-repeat="displayEvent in tm.events" 
                       class="calendar-event"
                       ng-click="eventSelected({event:displayEvent.event})"
                    <div class="calendar-event-inner"></div>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
</table>

in my controller I have the logic described in my html comments and the full set of $scope.treeOptions = { accept, beforeDrag, removed etc as shown in the docs.

Am I missing something I need to be doing controller side or am I setting the ui-tree attributes wrong on my template?

Answer 1

I had to move ng-model="rows" ui-tree-nodes="" from the first <tr>up to the <tbody>. And then the ui-tree-node from the first <td> up to its parent <tr>

Then further down move ng-model="tm.events" ui-tree-nodes="" on the <div class="add_event_shade"> up to its parent <td> and change the ng-model="tm.events" to ng-model="rows". The HTML is shown below.

this fixes the error shown above and I'm able to drag the element. Although I'm still having some other issues with the dragged element moving my events in the view, the dragged element not being visible as it is being dragged and I'm unable to drop the dragged element. But I guess those are things for another question.

<table ui-tree="treeOptions">
    <tbody ng-model="rows" ui-tree-nodes="">
    <!-- Builds Day View with one <tr> for each hour(24 hrs) in rows model --> 
        <tr ng-repeat="tm in rows track by $index" ui-tree-node>
            <td class="calendar-cell" ng-model="rows" ui-tree-nodes="">
            <!-- hourTouch() counts the touch events, once shows <p>Signup</p>, twice  -->
            <!-- shows <div class="finish-time"> which is my draggable element -->
            <!-- tm.events is an array of objects with the event detail properties -->
            <div class="add_event_shade" 
                 ng-if="tm.events" 
                 on-touch="hourTouch($event)">
                <p style="display:none;" 
                   ng-model="volunteerStart">
                   Signup
                </p>
                <div class="finish-time"
                     style="display:none";
                     ui-tree-node>
                     Finish: {{ displayEnd}}
                </div>
            </div>
            <div ng-class="{'calendar-event-wrap': tm.events}"
                 ng-show="tm.events">
                    <!-- adds events to the calendar day view -->
                    <div ng-repeat="displayEvent in tm.events" 
                         class="calendar-event"
                         ng-click="eventSelected({event:displayEvent.event})"
                        <div class="calendar-event-inner"></div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

<table ui-tree="treeOptions">
<tbody ui-tree-nodes data-max-depth="2" ng-model="row">
<!-- Builds Day View with one <tr> for each hour(24 hrs) in rows model --> 
<tr ng-repeat="tm in rows track by $index" ng-model="rows" ui-tree-node>
    <td class="calendar-cell">
        <!-- hourTouch() counts the touch events, once shows <p>Signup</p>, twice  -->
        <!-- shows <div class="finish-time"> which is my draggable element -->
        <!-- tm.events is an array of objects with the event detail properties -->
        <div class="add_event_shade" 
                ng-if="tm.events" 
                on-touch="hourTouch($event)"
                ng-model="tm.events"
                ui-tree-nodes="">
            <p style="display:none;" 
                 ng-model="volunteerStart">
                 Signup
            </p>
            <div class="finish-time"
                    style="display:none";
                    ui-tree-node>
                    Finish: {{ displayEnd}}
            </div>
        </div>
        <div ng-class="{'calendar-event-wrap': tm.events}"
                ng-show="tm.events">
            <!-- adds events to the calendar day view -->
            <div ng-repeat="displayEvent in tm.events" 
                   class="calendar-event"
                   ng-click="eventSelected({event:displayEvent.event})"
                <div class="calendar-event-inner"></div>
            </div>
        </div>
    </td>
</tr>
</tbody>

option settings as follows.

    $scope.treeOptions= {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
            return sourceNodeScope.$parent.$id === destNodesScope.$id;
        },
        dropped: function(event) {
          return true;
        },
        beforeDrop: function(event) {
           return true;
        }
    };

Data format as follows

   $scope.row = [{id:'', ..... //JSON data }]