Question

在我的应用中，我有一个由我的控制器生成的动态设备列表vm.deviceNames，所以在我的HTML代码中我ng-repeat="device in vm.deviceNames制作了我的设备列表然后我想让它们可拖动使用JQuery，但它并没有为我工作，当我尝试使用预定义的列表，我运行的应用程序，它工作！我尝试使用$window.load()，但它既没有工作，我怎么能让它适用于我生成的列表。这是我的代码

＆＃13;

<ion-view>
<script>
  $( window ).load( function() {
    console.log("window is loaded");
    $( ".device-list-item" ).draggable();
    $( "#container" ).droppable({
        drop: function (event, ui) {
            var $canvas = $(this);
            if (!ui.draggable.hasClass('canvas-element')) {
                    var $canvasElement = ui.draggable.clone();
                    $canvasElement.addClass('canvas-element');
                    $canvasElement.draggable({
                      containment: '#container'
                    });
                    $canvas.append($canvasElement);
                    $canvasElement.css({
                        left: (ui.position.left),
                        top: (ui.position.top),
                        position: 'absolute'
                  });
            }
        }
    });
  });
  </script>
  <ion-content
    has-bouncing="true"
    padding="true"
    scroll="true">
    
    <div ng-if="vm.deviceNames.length">
      <div class="heading" ng-bind="('TEXT_HOISTINGDEVICES' | translate)"></div>
      <div class="description" ng-bind="('DASHBOARD_DESCRIPTION' | translate)"></div>      
      
      <ul class="column-device-list" >
      
        <div id="{{device.id}}" class="device-list-item" ng-repeat="device in vm.deviceNames">
          <div ng-click="vm.removeBase(device.id)"><i class="se-icon-close"></i></div>          
          <div class="button icon-left button-clear" ng-dbclick="deviceSelected(device.id)" 
              ui-sref="app.dashboard.details({transmitterId: device.id, transmitterName: device.uiName})">
              <div class="dashboard-device-container">
                <div class="icons"><i class="device-icon"></i></div>
                <div class="deviceid" ng-bind="device.id"></div>
                <div class="icons" ng-if="device.uiShowError"><i class="exlhoist-alarm-error-icon"></i></div>
              </div>              
          </div>
        </div>
      
      </ul>
    </div>
    </ion-content> 

</ion-view>

＆＃13;

AngularJS-JQuery：如何使动态列表的元素可拖动？

0 个答案: