Convert Jquery Plugin into Angular Directives

Question

I'm having problem when converting my jquery plugin into angular directives, here's my jquery plugin call:

$('#fixed_hdr2').fxdHdrCol({
        fixedCols: 0,
        width: "100%",
        height: 400,
        colModal: [
        { width: 50, align: 'center' },
        { width: 110, align: 'center' },
        { width: 170, align: 'left' },
        { width: 250, align: 'left' },
        { width: 100, align: 'left' },
        { width: 70, align: 'left' },
        { width: 100, align: 'left' },
        { width: 100, align: 'center' },
        { width: 90, align: 'left' },
        { width: 400, align: 'left' }
        ],
        sort: true
    });

And when I convert it into angular directives it will look like this:

myApp.directive('fixedTable', function () {
return {
    restrict: 'AE',
    link: function (scope, element, attrs) {
        element.fxdHdrCol({
            fixedCols: attrs.fixedCols,
            width: attrs.width,
            height: attrs.height,
            colModal: [
               { width: 80, align: 'left'},
               { width: 250, align: 'left'},
               { width: 100, align: 'left'},
               { width: 100, align: 'left'},
               { width: 130, align: 'left'},
               { width: 100, align: 'left'},
               { width: 150, align: 'left'},
               { width: 130, align: 'center'},
               { width: 100, align: 'left'},
               { width: 150, align: 'left'}
            ]
        });
    }
}; })

here's my error -> "TypeError: Cannot read property 'width' of undefined" I know I have mistake in converting but I don't know how to convert it correctly. Any help is very appreciated. Thanks

Answer 1

your html code?

Error: "TypeError: Cannot read property 'width' of undefined"

Possibility 1：width: attrs.width
Possibility 2：colModal and table's column are Inconsistent