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

【问题标题】：Unable to pass data to AngularJS component directive无法将数据传递给 AngularJS 组件指令
【发布时间】：2016-06-15 09:38:53
【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

标签： angularjs angularjs-components

【解决方案1】：

试试这个

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

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

【讨论】：

【解决方案2】：

事情发生了变化——再次

组件现在忽略 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。

【讨论】：