Question

这是问题所在：我想通过单击表头来对表进行排序。为了避免每次重复代码，我已经做了一个指令。表头很好地显示，但我找不到让它们排序的方法。这是我的HTML的一部分：

<div class="table-responsive" >
    <table class="table table-striped" >
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th><t-header name="vnaam" hoofd="voornaam" ></t-header></th>
                <th><t-header name="anaam" hoofd="achternaam"></t-header></th>
            </tr>
        </thead>
        <tbody>
            <tr dir-paginate="cursist in homeCtrl.ckaart | orderBy: homeCtrl.sortKey:!homeCtrl.reverse" current-page="homeCtrl.currentPage">
                <td><a ng-click="homeCtrl.gotoDetail(cursist.id)"><span ng-class="cursist.keuzemotivatie.length || cursist.leerdoelen.length ? 'infosign-true' : 'infosign-false'" class="fa fa-info-circle infosign"></span></a></td>
                <td>{{cursist.vnaam}}</td>
                <td>{{cursist.anaam}}</td>
            </tr>
        </tbody>

我的指示：

.directive('tHeader', function(){
  return {
    restrict: 'EA',
    scope: {
      name: "@",
      hoofd: "@"
    },
    templateUrl: 'templates/theader.html',
    controllerAs: 'vm',
    bindToController: true,
    controller: function() {
      var vm = this;

      vm.sortKey = '-instrument';
        // sort t.b.v. table sorting

        vm.sort = function(keyname) {
            // alert(keyname);
            vm.sortKey = keyname;
            vm.reverse = !vm.reverse;
        console.log(vm.sortKey);
        }
    }

  }
})

属于指令的模板：

<div ng-click="vm.sort(vm.name)">{{vm.hoofd}}
  <span ng-show="vm.sortKey === vm.name" ng-class="{ 'fa fa-chevron-up':vm.reverse, 'fa fa-chevron-down':!vm.reverse }"></span>
</div>

在我看来，'vm.sortKey'参数以及'vm.reverse'参数没有传递给HTML。有人有想法吗？我犯了什么错误？

将AngularJS指令之外的参数传递给HTML

0 个答案: