Question

在我正在处理的应用程序中，我们有一个有一个表的视图，它可能会加载数千个记录（默认情况下，它一次显示100个，但是在100个记录的块中延迟加载。）在Angular中1，这需要一些时间，所以当有人试图对所有这些信息进行排序时，我正在努力弄清楚如何呈现加载微调器。

我正在进行一些基础研究并偶然发现this StackOverflow answer back in 2013，这表明实际上可以做这类事情。问题是，Angular在两年内已经成熟/改变了很多。

我分叉了一个在该问题中使用的Plunker - this is that forked plunker - 但通过更改下拉列表来改变排序顺序似乎并没有真正做任何事情。我写了一些事件，应该显示一个警告，说明排序过程发生了什么，然后抛出＆＃34;面纱＆＃34;通知用户正在进行加载过程。

对于那些不喜欢看掠夺者的人，请参阅以下相关代码：

查看：

<div ng-controller="ContactListCtrl as vm">

    <h1>AngularJS Sorting Example</h1>

    <select ng-model="vm.sortReverse" ng-change="vm.parseSortDirection()">
        <option value="false">Surname (A-Z)</option>
        <option value="true">Surname (Z-A)</option>
    </select>
    <table class="contacts">
        <tr>
            <th>Name</th>
            <th>Telephone</th>
        </tr>
        <tr ng-repeat="contact in vm.contacts | orderBy:vm.sortingOrder:vm.sortReverse" 
        repeat-start="vm.onSortStart()"
        repeat-done="vm.onSortDone()" >
            <td ng-class-even="'even'">{{contact.name}}, {{contact.surname}}</td>
            <td ng-class-even="'even'">{{contact.telephone}}</td>
        </tr>
    </table>
    <div id="veil" ng-show="vm.isLoading"></div>
    <div id="feedLoading" ng-show="vm.isLoading">Loading...</div>
</div>

JavaScript的：

var app = angular.module('myModule', []);

app.controller('ContactListCtrl', function ($scope, $timeout, $filter) {
    var vm = this;

    vm.sortingOrder = 'name';

    vm.sortorder = 'surname';
    vm.contacts = [{
        "name": "Richard",
        "surname": "Stallman",
        "telephone": "1234 98765"
    }, {
        "name": "Donald",
        "surname": "Knuth",
        "telephone": "3456 76543"
    }, {
        "name": "Linus",
        "surname": "Torvalds",
        "telephone": "2345 87654"
    }];

    vm.parseSortDirection = function () {
        vm.sortReverse = vm.sortReverse.toLowerCase() == "true";
    };

    vm.onSortStart = function () {
        alert('Sort started...');
        $scope.isLoading = true;
    }

    $scope.onSortDone = function (value) {
        alert('Sort complete.');
        $scope.isLoading = false;
    }

    vm.loadFeed = function(url) {       
        $scope.isLoading = true;        
    }

    vm.loadFeed();
});

app.directive('repeatStart', function () {
    return function(scope, element, attrs) {
        if(scope.$first) {
            scope.$eval(attrs.repeatStart);
        }
    };
});

app.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) {
            scope.$eval(attrs.repeatDone);
        }
    }
});

问题：使用ControllerAs语法，以何种方式在AngularJS控制器控制的表上进行列排序，执行旨在通知用户排序正在进行的代码？

使用ControllerAs语法

0 个答案: