Angular ui Baum arbeitet nicht in mozilla

Question

Plunker.

Die obigen Plunker funktionieren gut in Chrome und IE. Aber wenn es zu Mozilla Firefox kommt, ist es nicht.

Wenn ich versuche, das Dropdown-Menü auszuwählen, wird die Seite neu geladen.Wie kann ich dieses Problem stoppen?

<script type="text/ng-template" id="items_renderer.html"> 
    <div ui-tree-handle> 

     <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a> 
     <input type="text" style="display:none" ng-model="item.rowId"> 
     <input type="text" id="componentName{{$index}}" ng-style="getWidth(item.rowId)" ng-change="validateOnChange(item.componentName, 'componentName','',$index)" ng-model="item.componentName" style="width:156px;height: 23px;"> 
     <input type="text" id="componentIdentification{{getRowId(item.rowId)}}" ng-model="item.componentIdentification" ng-change="validateOnChange(item.componentIdentification,'componentIdentification', '',getRowId(item.rowId))" style="width:125px;height: 23px;"> 
     <select ng-model="item.componentType" id="componentType{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentType, 'componentType', 'Select', getRowId(item.rowId))" style="width:102px;height: 23px;"> 
      <option>Select</option> 
      <option ng-repeat="type in typeList" value="{{type.TYPE_ID}}">{{type.COMPONENT_TYPE}}</option> 
     </select> 
     <select ng-model="item.componentState" id="componentState{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentState,'componentState', 'Select' ,getRowId(item.rowId))" style="width:122px;height: 23px;"> 
      <option>Select</option> 
      <option ng-repeat="list in statusList" value="{{list.STATUS_ID}}">{{list.STATUS}}</option> 
     </select> 
     <select ng-model="item.actionId" id="actionId{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionId, 'actionId', 'Select',getRowId(item.rowId))" style="width:103px;height: 23px;"> 
      <option>Select</option> 
      <option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option> 
     </select> 
     <select ng-model="item.actionToPerform" id="actionToPerform{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionToPerform, 'actionToPerform', 'Select',getRowId(item.rowId))" style="width:122px;height: 23px;"> 
      <option>Select</option> 
      <option ng-repeat="actionPerform in actiontoperformList" value="{{actionPerform.ACTIONPERFORM_ID}}">{{actionPerform.ACTION_TO_PERFORM}}</option> 
     </select> 

Answer 1

ich dieses Problem gelöst, indem die Drag deaktivieren und fallen, da es einige interne Funktionen ruft daher die Seite neu zu laden.

<div ui-tree="options" data-drop-enabled="false" data-drag-enabled="false"> 

Answer 2

müssen Sie die ng-model vom ui-tree-nodes div entfernen.

Änderung dieser

<ol ui-tree-nodes ng-model="componentList"> 

dieser

<ol ui-tree-nodes> 

Demo