Unable to pass data to AngularJS component directive

Question

I'm trying to create a component directive using AngularJS 1.5. I'm passing the $scope variable defined in the controller to the component directive. But it's not rendering.

Here is the component directive:

.component('myComp', {
   scope: {},
   bindToController: {
       info: '=info'
   },

   template: [

       '<table<tr>',
       '<td>{{ $ctrl.info }}</td>',
       '</tr>',
       '</tbody>',
       '</table>'
   ].join('')

});

Here is the view

<my-comp info="employee"></my-comp>

But nothing is displayed and no error in browser console.

Answer 1

Things Have Changed -- Again

Components now ignore the bindToController property. Instead use bindings.

.component('myComp', {
   //scope: {},

   //obsolete
   //bindToController: {

   //Use instead
   bindings: {       
       info: '=info'
   },

   template: [

       '<table<tr>',
       '<td>{{ $ctrl.info }}</td>',
       '</tr>',
       '</tbody>',
       '</table>'
   ].join('')

});

The DEMO on JSFiddle

For more information, see AngularJS Developer Guide - Understanding Components.

Answer 2

Try this one

.component('myComp', {
 restrict: 'AE',
 scope: {info: '='},
 template: [

   '<table<tr>',
   '<td>{{ info }}</td>',
   '</tr>',
   '</tbody>',
   '</table>'
 ].join('')
});