排序指令的角度架构答案

【问题标题】：Angular architecture for a sorting directive排序指令的角度架构
【发布时间】：2014-08-18 12:54:47
【问题描述】：

对 Angular 很陌生，我正在寻找完成一项非常简单任务的最佳方法。

我的目标是通过角度 $resource 服务在数据库中更新项目模型的顺序（我有一个位置属性）。

我有以下模板结构：

<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Title</th>
            <th>Date</th>
            <th>Link</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody id="sortable" my-drag-list>
        <tr ng-repeat="project in projects" ng-class="{warning: !project.publish}">
            <td></td>
            <td>{{project.title}}</td>
            <td>{{project.date|date: 'MMMM yyyy'}}</td>
            <td><a ng-href="{{project.link}}" target="blank">{{project.link}}</a></td>
            <td><a ng-href="#/projects/{{project.id}}/"><span class="glyphicon glyphicon-edit"></span></a></td>
            <td><a ng-click="deleteProject(project)"><span class="glyphicon glyphicon-trash"></span></a></td>
        </tr>
    </tbody>
</table>
<button type="button" class="btn btn-success" ng-show="data.saveSort" my-update-sort-button>Save new sort</button>

tr 在我的tbody 元素中是可移动的。当我单击button 元素（超出ng-repeat 指令创建的范围）时，我想用新的位置值更新我的数据库，这些值由每个tr 的dom 位置确定（上部tr 的位置值会更小）。

乍一看，我打算使用以下内容执行 my-update-sort-button 指令：

var link = function(scope, el){

    el.on('click', function(){
        var els = el.parent().find('tr');

        for(var i = 0, len = els.length; i<len; i++){
            Projects.update({id: els.eq(i).data('projectId')}, {position: i});
        }
    });
};

但我不确定这种解决方案的“质量”。我不喜欢在我的 tr 元素上添加 data-project-id 属性。

感谢您对此案例的任何想法或解决方案！

【问题讨论】：

您能说明一下您要达到的目标吗？您是否要保存排序标准？还是保存位置也很重要。
@pixelbits 我正在尝试将项目的位置（取决于他在 DOM 中的位置）保存在项目模型中存在的位置属性中。

标签： javascript angularjs dom angularjs-directive angularjs-scope

【解决方案1】：

您需要在其模型中保留有关“项目”位置的信息。当“项目”被移动时，您将此信息保存到其模型中。在“my-drag-list”中执行。

当点击更新按钮时，您只需从模型发送信息而不扫描 DOM：

var link = function(scope, el){

  el.on('click', function(){
      var model;
      for(var i = 0, len = scope.model.projects.length; i<len; i++){
          model = scope.model.projects[i];
          Projects.update({id: model .id}, {position: model.position});
      }
  });
};

最好不要向服务器发送大量请求。将所有信息一起发送一个请求。

【讨论】：