Question

我是一个有角度的新手，我试图使用ng-sortable在另一个可排序数组中生成一个可排序数组。当我直接从javascript文件获取数据时，它可以正常工作，但是当我使用$ http检索相同的数据时，只显示非重复数据 - 我没有收到任何错误，但转发器不会出现＃39 ; t显示。

带有测试数据的控制器（可以工作）：

angular.module('demoApp').controller('TestController', function ($scope, TestService, TestDataFactory) {

    $scope.testData = TestService.getTestData(TestDataFactory.Data);

});

带$ http的控制器：

angular.module('demoApp').controller('TestController', function ($scope, $http, TestService) {

    $http.get('test/Index')
        .success(function (data) {
            $scope.testData = TestService.getTestData(data);
        })
        .error(function (data) {
            alert("Error getting test data");
        });

});

查看：

<h1 class="dataname">{{data.name}}</h1>
<div ng-model="testData" id="test" ng-controller="TestController">
    <div as-sortable="sectionSortOptions" ng-model="testData.sections">
        <div class="section" ng-repeat="section in testData.sections" as-sortable-item ng-include="'test/Section'">
        </div>
    </div>
</div>

Test / Index返回一个与TestDataFactory.Data格式相同的字符串，每种情况下TestService.getTestData（）（它只是一个数据格式化程序）返回的对象是相同的。

我错过了什么吗？

编辑：

似乎我的问题与我的ng-include在其中有另一个ng-sortable这一事实有关 - 这里是对整个事情的扁平化看法：

<h1 class="dataName">{{testData.name}}</h1>
    <div as-sortable="sectionSortOptions" ng-model="testData.sections">
        <div class="section" ng-repeat="section in testData.sections" as-sortable-item>
            <span class="section-sortOrder" as-sortable-item-handle>Section {{section.sortOrder}}</span>
            <div as-sortable="itemSortOptions" ng-model="section.items">
                <div class="item" ng-repeat="item in section.items" as-sortable-item>
                            <div as-sortable-item-handle>
                                <span class="itemName">{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如果我注释掉这一行：

<div as-sortable="sectionSortOptions" ng-model="documentPack.sections">

关联的as-sortable-item-handle（加上结束div标签）然后我得到了各部分中的可排序项目（但显然不是部门级别的可排序性）。

此处的Plunker：http://plnkr.co/edit/CNLVmlGjPvkcFKRo7SjN?p=preview - 使用$ timeout来模拟$ http（$ timeout导致同样的问题）但现在正在使用最新的ng-sortable（请参阅答案）。

Answer 1

我认为这是你的问题：

    .success(function (data) {
        $scope.testData = TestService.getTestData(data);
    })

应该是

.success(function(data){
    $scope.testData = data;
})

成功函数在promise被解析时被调用，所以如果你这样做了

$scope.testData = TestService.getTestData(data);

你可能正在进行另一个远程调用，就像第一个完成一样，你的页面永远不会加载任何内容。

此外，我建议您阅读ngResource的文档，因为它可能对您正在执行的任何操作都有用。

在您的控制器中使用$ http调用并不是一个好习惯，因为您将它们与远程调用，服务器地址以及应该在其他配置文件中的许多其他内容耦合在一起。

Answer 2

好的，似乎问题出在我所用的ng-sortable版本上 - 版本号标记为1.2.2（与当前版本相同），但它没有最新的修复（自6月15日起 - 所以，所有15天前）。当这个问题出现时，不确定我是多么不幸遇到（可能很小的）窗口，但是我会将此作为答案发布，以防万一其他人在2015年6月初的版本中遇到类似的行为。

嵌套的可排序角重复不用$ http填充

2 个答案: