如何使用 Angular.js 和 JQuery UI "link"数组和 DOM？

我正在使用JQuery UI在Angular中编写一个站点，它允许可安排的项目。我最初用数组的内容填充DOM，然后允许用户拖动DOM元素。我希望DOM元素的拖动与数组顺序的更新相对应。

我使用ng-repeat指令将数组转换为DOM树，并最初认为数组元素重新排列将自动发生。我可以用Angular做这些吗?下面是我的代码:

<!DOCTYPE html>
<html ng-app = "">
<head>
  <style>
    #BlockContainer li
    {
      /*make there be no selection on each list item*/
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    li 
    {
      list-style-type: none;
    }
    #ArchtypeContainer li, #BlockContainer li
    {
      display: block;
    }
  </style>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-require="bootstrap-css@3.1.1" data-semver="3.1.1" />
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-require="bootstrap@3.1.1" data-semver="3.1.1"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-require="angular.js@1.2.17" data-semver="1.2.17"></script>
</head>
<body ng-controller="Controller">
  <script>
      function Controller($scope)
      {
        //sets out the data archtypes for everything
        $scope.BlockArchtypes = [{"Name": "Move Seconds", "Arguments": [{"Placeholder": "Speed (0 - 100)"}, {"Placeholder": "Seconds"}]}, {"Name": "Move Distance", "Arguments": [{"Placeholder": "Distance (Feet)"}, {"Placeholder": "Speed (0 - 100)"}]}];
        $scope.BlockData = [];
        $scope.NewBlock = function (index)
        {
          $scope.ToCopy = angular.copy($scope.BlockArchtypes[index]); 
          $scope.BlockData.push($scope.ToCopy);

        }
        $scope.Update = function(){
          console.log($scope.BlockData);
        }
      }
      $(document).ready(function()
      {
        $("#BlockContainer").sortable(
        {
          change: function(event, ui) 
          {
            $scope.apply($scope.BlockData);
          }
        });
      });
  </script>
  <h3>Archtypes</h3>
  <ul id = "ArchtypeContainer">
    <li ng-repeat="Block in BlockArchtypes">
      <div>{{Block.Name}}</div>
      <div ng-repeat="Argument in Block.Arguments"><input  type="text" ng-model = "Argument.Value" placeholder="{{Argument.Placeholder}}" /></div>
      <button ng-click = "NewBlock($index);">Add</button>
    </li>
  </ul>
  <h3>Program</h3>
  <button ng-click = "Update()">Update</button>
  <ul id = "BlockContainer">
    <li ng-repeat="Block in BlockData track by $index">
      <div>{{Block.Name}}</div>
      <div ng-repeat="Argument in Block.Arguments"><input type="text" ng-model = "Argument.Value" placeholder="{{Argument.Placeholder}}" /></div>
    </li>
  </ul>
</body>
</html>

这可能是使用AngularJS拖放库的最佳方式，它基本上是jQuery UI的可拖放功能，但可以直接与Angular一起工作。

可拖动的例子:

<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" 
 ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">
    {{list1.title}}
</div>

可放置示例:

<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" 
 jqyoui-droppable style='height:50px;'>
    <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" 
     jqyoui-draggable ng-hide="!list2.title">
        {{list2.title}}
    </div>
</div>

Angular代码:

App.controller('OverviewCtrl', function($scope) {
    $scope.list1 = {title: 'AngularJS - Drag Me'};
    $scope.list2 = {};
});

网上有更多的例子。

你没有让它与jQuery UI一起工作的原因是因为Angular不知道DOM的变化，除非这些变化是由Angular自己完成的，或者你告诉它这些变化(例如通过$scope.$apply())…所以，为了让这一切正常工作，你需要为所有可移动的元素附加观察者或创建回调函数，并让Angular在每次更改时进行必要的作用域变量更新——这就是为什么我建议使用这个库，它几乎为你做了所有的事情。

相关内容

最新更新

热门标签：