Question

我编写了以下指令，尝试为网格中的行排序一些常用功能（请注意，这是我的第一个指令，所以如果有很多误解，请对我保持温和）：

function AddSortDirectiveToModule(module) {
    module.directive('sortableHeader', function() {
        return {
            restrict: 'E',
            template:
                '<span>'+
                    '<a href="javascript:void(0);" ng-click="sortBy(\'{{colName}}\')">{{colText}}</a>' +
                    '<span class="gly {{icon}}"></span>' +
                '</span>',
            replace: true,
            scope: {
                colName: '@',
                colText: '@',
                reverse: '=',
                predicate: '=',
            },
            controller: function ($scope) {
                $scope.icon = $scope.predicate == $scope.colName ? ($scope.reverse ? "gly-sort-by-attributes-alt" : "gly-sort-by-attributes") : "";
                $scope.sortBy = function(colNam) {
                    if ($scope.predicate == colNam) {
                        if ($scope.reverse == true) {
                            $scope.predicate = '';
                            return;
                        }
                        $scope.reverse = !$scope.reverse;
                    } else {
                        $scope.reverse = false;
                    }
                    $scope.predicate = colNam;
                };
            }
        };
    });
}

我这样用：

<sortable-header col-text="Text" col-name="PropName" reverse="reverse" predicate="predicate" />

...当我点击应该进行排序的生成链接时，我收到以下错误（这对我没有意义）：

[$ parse：syntax]语法错误：令牌'colName'是意外的，期望[[{{colName}}]的第3列的[：]从[colName}}开始。

我知道问题与模板中的{{colName}}有关，但我不明白为什么这是一个问题。

有什么想法吗？

Answer 1

您可以尝试使用此模板：

'<span>'+
    '<a href="javascript:void(0);" ng-click="sortBy(colName)">{{colText}}</a>' +
    '<span class="gly {{icon}}"></span>' +
'</span>',

同样代替href="javascript:void(0)"，您应该在href="#"

中使用$event.preventDefault();和ngClick

AngularJs - 这个指令有什么问题？

1 个答案: