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

Sounds like something is trying to get width off of an object that is undefined. Is the error occurring inside the plugin? — deitch
– deitch, Commented Dec 7, 2014 at 16:05
yeah I already added it, <table fixed-table fixed-cols="3" height="300" width="100%"> I think my problem is in the colModal. I don't know how to convert this and call it in my element. — user1157768
– user1157768, Commented Dec 7, 2014 at 16:07
attr values will likely be string, test typeof to be sure. Also is jquery included before anugular library? — charlietfl
– charlietfl, Commented Dec 7, 2014 at 16:11

soakit · Accepted Answer · 2015-12-15 01:06:56Z

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

answered Dec 15, 2015 at 1:06

soakit

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert Jquery Plugin into Angular Directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related