Table header sortable with AngularJS custom directive using link and scope options -


i want implement angular directive make table header sortable. have tried following:

html:

<th sortable="headers[0]">     company id </th> <th sortable="headers[1]">     client id </th> 

typescript controller:

... $scope.headers = [     new models.campaigntableheader("companyid", true, "agency"),     new models.campaigntableheader("clientid", true, "client"),     new models.campaigntableheader("clientname", true, "client name"),     new models.campaigntableheader("name", true, "campaign name") ]; ... 

typescript tableheader model:

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) outputs expected campaigntableheader object. problem ng-class directive doesn't have right scope. check console scope header element , doesn't have sortable property. know should change work?


Comments