为什么我的Angular指令没有正确绑定我的一个字段？

Question

我想创建一个指令来创建可排序的表头。标题似乎已呈现并单击它们导致排序顺序在升序/降序之间切换，就像我期望的那样，但排序列永远不会改变。

angular
  .module('myApp', [])

angular.module('myApp')
    .directive('sortableheader', function () {
        return {
            template: '<thead><tr><th ng-repeat="col in ctrl.columns"><a href="#" ng-click="ctrl.orderByField = \'{{col.field}}\';ctrl.sortDesc = !ctrl.sortDesc">{{col.name}}<span ng-show="ctrl.orderByField == \'{{col.field}}\' && ctrl.sortDesc" class="fa fa-caret-down"></span><span ng-show="ctrl.orderByField == \'{{col.field}}\' && !ctrl.sortDesc" class="fa fa-caret-up"></span></a></th></tr></thead> '
            ,
            restrict: 'E',
            replace: true,
            scope: {
                columns: '=',
                orderByField: '=',
                sortDesc: '=',
            },
            controllerAs: 'ctrl',
            bindToController: true,
            controller: function () {
                var vm = this;
                // Any additional functionality?                
            }
        }
    });

(function () {
    'use strict';

    angular.module('myApp')
           .controller('SampleController', SampleController);
    

    function SampleController() {
        var vm = this;
        
        vm.orderByField = 'col1';
        vm.sortDesc = true;
         
        vm.data = [
          {col1: 'ABC', col2: '123'},
          {col1: 'XYZ', col2: '321'},
          {col1: 'GHI', col2: '234'},
          {col1: 'DEF', col2: '456'},
                  ];
      
        vm.columns = [
            { name: 'Column 1', field: 'col1' },
            { name: 'Column 2', field: 'col2' },            
        ];
    }

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

<div ng-app="myApp"  ng-controller="SampleController as report">
  Order by: {{report.orderByField}}
  <table>
       <sortableheader columns="report.columns" orderByField="report.orderByField" sort-desc="report.sortDesc"></sortableheader>
    <tbody>
        <tr ng-repeat="d in report.data | orderBy:report.orderByField:report.sortDesc">
            <td>{{d.col1}}</td>                                        
            <td>{{d.col2}}</td>
        </tr>
    </tbody>   
  </table>
</div>

我在哪里错了？我确定这是一些范围问题（似乎总是如此），但我没有看到它。

Answer 1

您不需要将col.field放在引号中 - 请参阅更新的代码

＆＃13;

＆＃13;

angular
  .module('myApp', [])

angular.module('myApp')
    .directive('sortableheader', function () {
        return {
            template: '<thead><tr><th ng-repeat="col in ctrl.columns"><a href="#" ng-click="ctrl.orderByField = col.field;ctrl.sortDesc = !ctrl.sortDesc">{{col.name}}<span ng-show="ctrl.orderByField == \'{{col.field}}\' && ctrl.sortDesc" class="fa fa-caret-down"></span><span ng-show="ctrl.orderByField == \'{{col.field}}\' && !ctrl.sortDesc" class="fa fa-caret-up"></span></a></th></tr></thead> '
            ,
            restrict: 'E',
            replace: true,
            scope: {
                columns: '=',
                orderByField: '=',
                sortDesc: '=',
            },
            controllerAs: 'ctrl',
            bindToController: true,
            controller: function () {
                var vm = this;
                // Any additional functionality?                
            }
        }
    });

(function () {
    'use strict';

    angular.module('myApp')
           .controller('SampleController', SampleController);
    

    function SampleController() {
        var vm = this;
        
        vm.orderByField = 'col1';
        vm.sortDesc = true;
         
        vm.data = [
          {col1: 'ABC', col2: '123'},
          {col1: 'XYZ', col2: '321'},
          {col1: 'GHI', col2: '234'},
          {col1: 'DEF', col2: '456'},
                  ];
      
        vm.columns = [
            { name: 'Column 1', field: 'col1' },
            { name: 'Column 2', field: 'col2' },            
        ];
    }

})();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

<div ng-app="myApp"  ng-controller="SampleController as report">
  Order by: {{report.orderByField}}
  <table>
       <sortableheader columns="report.columns" order-by-field="report.orderByField" sort-desc="report.sortDesc"></sortableheader>
    <tbody>
        <tr ng-repeat="d in report.data | orderBy:report.orderByField:report.sortDesc">
            <td>{{d.col1}}</td>                                        
            <td>{{d.col2}}</td>
        </tr>
    </tbody>   
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;