无法将数据传递给AngularJS组件指令

Question

我尝试使用AngularJS 1.5创建组件指令。我将控制器中定义的$ scope变量传递给组件指令。但它没有渲染。

这是组件指令：

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

   template: [

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

});

这是视图

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

但在浏览器控制台中没有显示任何内容且没有错误。

Answer 1

事情发生了变化 - 再次

组件现在忽略bindToController属性。而是使用bindings。

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

   //obsolete
   //bindToController: {

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

   template: [

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

});

DEMO on JSFiddle

有关详细信息，请参阅AngularJS Developer Guide - Understanding Components。

Answer 2

试试这个

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

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