使用链接和范围选项使用AngularJS自定义指令对表头进行排序

我想实现一个Angular指令，使表格标题可排序。我尝试了以下方法：

HTML:

TypeScript表格标题模型：

export class CampaignTableHeader {
    public asce: boolean;
    public desc: boolean;
    public css: () => string;

    constructor(
        public id: string,
        public sortable: boolean = false,
        public title?: string
    ) {
        if (_.isNull(title) || _.isUndefined(title)) {
            this.title = id;
        }
        this.asce = false;
        this.desc = false;
        this.css = () => {
            var result = this.sortable ? "sortable" : "";
            if (this.asce) {
                result = "sortable-asce " + result;
            }
            else if (this.desc) {
                result = "sortable-desc " + result;
            }
            return result;
        }
    }
}

TypeScript Main：

var cuidApp = angular
.module("mainModule", [])
.controller("mainController", ["$scope", "$http", "$window", "$timeout", "$q", Controllers.MainController])
.directive("sortable", () => {
    return {
        link: (scope: any, element, attrs) => {
            var value: Models.CampaignTableHeader = scope.sortable;
            console.log(scope.sortable);
            var e = $(element);
            e.attr("ng-class", "sortable.css()");
        },
        scope: {
            sortable: "="
        }
    }
});

console.log（scope.sortable）

输出预期的ActivityTableHeader对象。问题是

ng class

指令没有正确的范围。我使用控制台检查header元素的作用域，它没有可排序的属性。你知道我应该换什么才能让它工作吗

export class CampaignTableHeader {
    public asce: boolean;
    public desc: boolean;
    public css: () => string;

    constructor(
        public id: string,
        public sortable: boolean = false,
        public title?: string
    ) {
        if (_.isNull(title) || _.isUndefined(title)) {
            this.title = id;
        }
        this.asce = false;
        this.desc = false;
        this.css = () => {
            var result = this.sortable ? "sortable" : "";
            if (this.asce) {
                result = "sortable-asce " + result;
            }
            else if (this.desc) {
                result = "sortable-desc " + result;
            }
            return result;
        }
    }
}

var cuidApp = angular
.module("mainModule", [])
.controller("mainController", ["$scope", "$http", "$window", "$timeout", "$q", Controllers.MainController])
.directive("sortable", () => {
    return {
        link: (scope: any, element, attrs) => {
            var value: Models.CampaignTableHeader = scope.sortable;
            console.log(scope.sortable);
            var e = $(element);
            e.attr("ng-class", "sortable.css()");
        },
        scope: {
            sortable: "="
        }
    }
});