Question

在<table>标题中，可以点击标签以某种特定方式订购数据，我正在尝试替换此代码：

<th>
  <a class="sortable-th" href="#" data-ng-click="sortType = 'atSenderScheduledDate'; sortReverse = !sortReverse">
    Date
    <span data-ng-show="sortType == 'atSenderScheduledDate' && !sortReverse" class="md-chevron-down"></span>
    <span data-ng-show="sortType == 'atSenderScheduledDate' && sortReverse" class="md-chevron-up"></span>
  </a>
</th>

（只显示一个<span>以显示排序顺序），带有自定义指令，例如：

<th>
  <th-sortable type="atSenderScheduledDate" label="Date"></th-sortable>
</th>

Controller保存排序变量：

$scope.sortType = 'atSenderScheduledDate'; // set the default sort type
$scope.sortReverse = false;  // set the default sort order

指令如下：

(function() {

  angular.module('app').directive('thSortable', thSortable);

  thSortable.$inject = ['$parse'];

  function thSortable($parse) {
    return {
      restrict : 'E',
      scope : {
      },
      link : function(scope, elem, attrs) {
        var type = attrs.type;
        var label = attrs.label;

        var newElem = '';
        newElem += '<a class="sortable-th" href="#">';
        newElem += '  ' + label;
        newElem += '  <span class="md-chevron-up" data-ng-show="sortType === \'' + type + '\' && !sortReverse"></span>';
        newElem += '  <span class="md-chevron-down" data-ng-show="sortType === \'' + type + '\' && sortReverse"></span>';
        newElem += '</a>';
        elem.append(newElem);

        elem.bind('click', function() {
          scope.$apply(function() {
            $parse("sortType").assign(scope.$parent, type);
            $parse("sortReverse").assign(scope.$parent, !scope.$parent.sortReverse);
          });
        });
      }
    };
  }
})();

click绑定按预期工作，数据准确排序。但是，我无法让两个data-ng-show的{{1}}部分工作，只显示相关的部分。

任何帮助都将不胜感激，谢谢。

Answer 1

elem.bind('click', function() {
   scope.$apply(function() {
     $parse("sortType").assign(scope.$parent, type);
     $parse("sortReverse").assign(scope.$parent, !scope.$parent.sortReverse);
   });
});

您正在使用$parse("sortType")和$parse("sortReverse")，不确定如何更新parent scope properties。由于您的指令是一个隔离范围，为什么不在下面的范围内将它们拉出来并使用它。

 scope : {
     sortType: "=",
     sortReverse: "="
 },

然后在您的链接功能中，您可以使用scope.sortType和scope.sortReverse，并且更好地将object发送到ng-model，因为boolean值会创建整个new scope inside your directive.

将ng-show绑定到自定义指令中

1 个答案: