angularjs - ng-class 在初始页面加载时不正确

Question

这个问题困扰了我一段时间。

加载页面时，通过以下代码设置表格的默认排序：

$scope.sort = {
     field: 'date',
     dir: 'asc'
};

通过用户单击表格标题来更改排序，如下所示：

<th ng-class="{'sort-desc': sorted('date', 'desc'), 'sort-asc': sorted('date', 'asc')}" class="sortable">
     <a href="#" ng-click="setSort('date')">Date</a>
</th>

这是 setSort 代码：

$scope.setSort = function(field) {
     if ($scope.sort.field == field)
          $scope.sort.dir = ($scope.sort.dir == 'desc') ? 'asc' : 'desc';
     else
          $scope.sort.field = field;
     $scope.update();
};

并排序

$scope.sorted = function(field, dir) {
     return ($scope.sort.field == field && $scope.sort.dir == dir);
};

在初始页面加载时，默认排序 (date-asc) 应用于表中的数据，但不应用 sort-asc。更改排序列时，它会显示正常 - 这只是初始页面加载。

如何在页面加载时正确评估角度？

Answer 1

经过一番摸索，我发现了问题所在：我$scope.sort定义了两次，一次作为对象，一次作为函数。

出于某种原因，它工作过一次$scope.sort.dir，并$scope.sort.field通过更改排序重新定义，但原始值被我的函数定义覆盖。

经验教训 - 对变量名称更加小心。