AngularJS组件中使用controller as语法导致功能失效问题

嘿，我之前也踩过这个坑！问题的核心其实很直白：当你给组件设置了controllerAs: 'attachments'后，模板里的上下文引用就从默认的$ctrl变成了你自定义的别名，原来的$ctrl写法自然找不到对应的属性和方法，功能也就跟着失效了。

第一步：确认组件定义的正确性 #

先把带controllerAs的组件代码补全写对，确保controllerAs属性已经正确添加：

'use strict';
angular
  .module('myApp')
  .component('attachments', {
    bindings: {
      add: '&',
      remove: '&',
      attachments: '<'
    },
    templateUrl: 'bookAbsence/attachments/attachments.html',
    controller: 'AttachmentsController',
    controllerAs: 'attachments' // 这里是你自定义的控制器别名
  });

第二步：同步修改模板中的引用 #

接下来要把模板里所有原来用$ctrl的地方，全部替换成你设置的别名attachments，这样模板才能正确关联到控制器的属性和方法：

<div ng-if="attachments.canUploadAttachment === true">
  <add-attachment-button add="attachments.handleAdd(value)"></add-attachment-button>
  <attachment-list attachments="attachments.attachments" remove="attachments.handleRemove(value)"></attachment-list>
</div>

额外的小提醒 #

• 如果你觉得别名和绑定的attachments属性同名容易搞混，可以给绑定属性起个别名，比如把组件绑定改成attachments: '<@attachmentList'，这样模板里就可以写成attachments.attachmentList，避免歧义。
• 一定要确保你的AttachmentsController里的属性和方法都是挂载到this上的，比如this.canUploadAttachment = true;、this.handleAdd = function(value) { ... }，因为controllerAs本质就是把控制器实例以别名的方式暴露给模板。

内容的提问来源于stack exchange，提问作者user1261710