how to transclude components?

Question

I'm using angular-gridster in a project i'm working on.
We are building the project mainly with angular 1.5 components. My view looks like this:

<qn-grid>

        <qn-grid-item sizeX="1" sizeY="1" col="0" row="0">

        </qn-grid-item>

        <qn-grid-item sizeX="1" sizeY="1" col="0" row="1">

        </qn-grid-item>

    </qn-grid>

In the qnGridItem component the bindings object are always undefined.
How can get the values from the attributes(bindings object in the qnGridItem) ? (what should be the qnGrid template?)

Currently the qnGrid is :

<div gridster="$ctrl.gridsterOpts">
     <div ng-transclude></div>
</div>

qnGridItem :

var qnGridItem = {
        bindings: {
            sizeX: '@',
            sizeY: '@',
            col: '@',
            row: '@'
        },
        require: {
            qnGrid: '^^'
        },
        transclude: true,
        template: `
            <div gridster-item="$ctrl.itemMap" >
              <div ng-transclude></div>
            </div>
          `,
        controller: function () {

            var ctrl = this;
            ctrl.$onInit = function () {

                console.log(ctrl.qnGrid)

                ctrl.itemMap = {
                    sizeX: 'item.size.x',
                    sizeY: 'item.size.y',
                    row: 'item.position[0]',
                    col: 'item.position[1]'
                };

                ctrl.item = {
                    size: {
                        x: ctrl.sizeX,
                        y: ctrl.sizeY
                    },
                    position: [ctrl.col, ctrl.row]
                };
                ctrl.qnGrid.addItem(ctrl.item);
            };
        }
    };

I was trying to take insperation from Todd Mottos's posts

Answer 1

The problem was with my attribute casing.

I wrote sizeX and it should be size-x