ui-tree-node不可拖动&错误无法读取null

时间:2016-06-02 19:53:24

标签: angularjs angularjs-directive ionic-framework angular-ui-tree

我收到了这个错误; Cannot read property '0' of null(对于'0','1','2','3'等等)每天24小时一次。然后再次为'8','9','10'和'11'行,我在日历上有活动。

screen shot 2016-06-02 at 1 35 39 pm

这是我的日历日视图模板

<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>

在我的控制器中,我有我的html评论中描述的逻辑以及文档中显示的$scope.treeOptions = { accept, beforeDrag, removed等全套。

我错过了我需要做控制器端的事情,还是我在模板上设置了ui-tree属性错误?

2 个答案:

答案 0 :(得分:1)

我必须将ng-model="rows" ui-tree-nodes=""从第一个<tr>移到<tbody>。然后是ui-tree-node从第一个<td>到其父<tr>

然后再向下移动ng-model="tm.events" ui-tree-nodes=""上的<div class="add_event_shade">直至其父<td>,并将ng-model="tm.events"更改为ng-model="rows"。 HTML如下所示。

这修复了上面显示的错误,我可以拖动元素。虽然拖动的元素在视图中移动我的事件仍然存在一些其他问题,但拖动的元素在被拖动时不可见,我无法删除拖动的元素。但我猜这些都是另一个问题。

<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>

答案 1 :(得分:1)

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

  

选项设置如下。

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

数据格式如下

{{1}}