Question

我主要是寻找一些最佳实践＆＃39;建议在这里。

我有一个视图，其中包含从API中提取的数据表。需要通过单击列标题调用API来对此数据进行排序。想象一下，单击firstName列和数据按字母顺序排序，再次单击将按相同的列降序排序。

当用户登录时，数据最初通过控制器通过控制器提供。此数据显示在表中。

然后，我具有通过上面提到的点击标题对数据进行排序的功能。

通过将此功能放入带有控制器功能的指令中，其中单击的列调用该指令中的函数，该功能将触发，并且console.log将显示已正确返回数据，但视图不会＃39; t更新以显示重新排序的数据。

我在watch，apply＆amp;通过scope选项进行双向数据绑定，但无济于事。

如果我将相同的功能放入控制器本身，则重新排序和数据刷新会立即生效。

我真的试图删除这个功能，将其分成一个指令，因为根据我的理解，视图交互应该通过指令处理，以便采用角度方式＆＃39;但我不能让它像这样工作。

任何好的解释（简单）建议都会非常感激。

非常感谢。

Answer 1

您无需创建指令来处理排序，您可以使用ng-click="yourController.sortTheData()"

如果你考虑一下，你的意图并不是真正操纵视图层。您的目的是订购清单。 Angular将处理重新绘制数据。

但是，如果您仍然希望使用指令来执行排序，那么这是一个关于Plunker的示例，我认为这反映了您尝试实现的目标。 https://plnkr.co/edit/ILM26qF1BOJvSwsOnLoi?p=preview

angular.module('app', [])

.service('dataService', function($filter) {
  var data = [{
    id: 1,
    name: 'Apple'
  }, {
    id: 2,
    name: 'Boy'
  }, {
    id: 3,
    name: 'Cat'
  }, {
    id: 4,
    name: 'Dog'
  }, {
    id: 5,
    name: 'Elephant'
  }];
  var ascending = true;
  this.getData = function() {
    return data;
  }
  this.sortData = function(propertyName) {
    ascending = !ascending;
    var direction = ascending ? '+' : '-';

    var sortedData = $filter('orderBy')(data, direction + propertyName);
    //since everyone is referencing data by reference, we need to empty the array and fill it with the new data
    data.splice(0, data.length);
    Array.prototype.push.apply(data, sortedData);
    return data;
  }

}).controller('MyController', function($filter, dataService) {
  var vm = this;
  vm.data = dataService.getData();
  vm.ascending = true;
  vm.sortOutsideDirective = function() {
    vm.data = dataService.sortData('name');
  }
}).directive('sortable', function(dataService) {
  return {
    restrict: 'A',
    scope: {
      propertyName: '=sortable'
    },
    link: function($scope, element, attributes) {
      element.on('click', function() {
        dataService.sortData($scope.propertyName);
        $scope.$apply()
      })
    }
  };
})

/* Styles go here */

th{
  cursor:pointer;
  }
th, td{
  padding:20px;
  border:1px solid grey;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MyController as vm">
  <button ng-click="vm.sortOutsideDirective()">Sort outside by name</button>
  <table>
    <tr>
      <th sortable="'id'">ID</th>
      <th sortable="'name'">Name</th>
    </tr>
    <tr ng-repeat="item in vm.data">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
    </tr>
  <sorter data="vm.data" direction="vm.direction"></sorter>
</body> 

</html>

Angular从视图

1 个答案: