指令中的AngularJS謂詞不起作用

Question

我在指令中排序時遇到問題。我想用'Name'和'Text'屬性動態創建一個表頭。 '名稱'包含邏輯名稱和'文本'字段的顯示名稱。當我在ng-repeat和動態列中不使用謂詞時，一切正常。

HTML：

<ng-my-table 
    ng-columns="[ 
      { Text: 'First name', Name: 'FirstName' }, 
      { Text: 'Last name', Name: 'LastName' } 
     ]"> 
</ng-my-table> 

指令模板：

<thead> 
    <tr> 
     <th ng-repeat="column in ngColumns" ng-click="predicate='{{column.Name}}'; reverse=!reverse">{{column.Text}}</th> 
    </tr> 
</thead> 

編譯表頭看起來同樣喜歡靜態的，但是不起作用。

有人可以幫助我嗎？謝謝。

Answer 1

這裏是工作示例：

指令模板：

<thead> 
    <tr> 
     <th ng-repeat="column in ngColumns" ng-click="SortColumn(column.Name)">{{column.Text}}</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="item in ngModel | orderBy:predicate:reverse"> 
    ... 
    ... 

指令控制器：

controller: ["$scope", "$http", function ($scope, $http) { 
      // convert string to object 
      $scope.ngColumns = $scope.$eval($scope.ngColumns); 
      // models for sorting 
      $scope.predicate = $scope.ngColumns[0].Name; 
      $scope.reverse = false; 
      // sort function 
      $scope.SortColumn = function (columnName) { 
       $scope.predicate = columnName; 
       $scope.reverse = !$scope.reverse 
      } 
     }] 

我希望它可以幫助別人。

Answer 2

predicate='{{column.Name}}';看起來像一個問題的來源。

ng-click指令不使用角度表達式語法。嘗試用這種方式寫predicate=column.Name;

Answer 3

您需要將謂詞與被循環的作用域對象相關聯。

也就是說，你的標記應該是：

<th ng-repeat="column in ngColumns| orderBy:predicate:reverse" 
    ng-click="predicate='{{column.Name}}'; reverse=!reverse">{{column.Text}}</th> 

然而，一個建議 - 在ng-click指令中的代碼移到範圍的控制器功能 - 更容易維護。

所以，在你的控制器的功能是這樣的：

//Don't forget to initialize 
$scope.predicate = $scope.ngColumns[0].Name; 
$scope.reverse = false; 

$scope.sortColumn = function (columName) { 
    $scope.predicate = columnName; 
    $scope.reverse = !$scope.reverse 
} 

您的視圖代碼現在看起來像：

<th ng-repeat="column in ngColumns| orderBy:predicate:reverse" 
     ng-click="sortColumn(column.Name)">{{column.Text}}</th>