AngularJS 1.7中ES6组件内数据无法在模板中访问的问题

你遇到的问题核心是AngularJS 1.x组件的控制器别名（controllerAs）默认规则导致模板无法识别this.test变量。

为什么会出现这个问题？ #

在AngularJS 1.x的组件系统中，当你用ES6类定义控制器时，组件默认会把控制器实例绑定到$ctrl这个别名上，而不是直接将控制器的属性暴露在当前作用域的根层级。你的模板里写的{{test}}，Angular会在当前作用域里查找test变量，但实际上this.test是挂载在控制器实例（默认别名$ctrl）上的，所以自然找不到对应的值。

两种快速解决方案： #

方案1：修改模板使用默认别名$ctrl

直接把模板里的{{ test }}改成{{ $ctrl.test }}即可：

<header-component></header-component>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="packages-name-box">
        <h1 class="homepage-title">Packages Name {{ $ctrl.test }}</h1>
        <packages-list-group pages-data="pagesPackageData"></packages-list-group>
      </div>
    </div>
  </div>
</div>

方案2：显式指定控制器别名

如果你不想用默认的$ctrl，可以在组件定义里添加controllerAs属性，自定义别名（比如常用的vm）：

import './app.component.scss';
export const AppComponent = {
  template: require('./app.component.html'),
  controllerAs: 'vm', // 自定义控制器别名
  controller: [
    'PackagesService',
    class AppController {
      constructor (PackagesService) {
        this.test = 11;
      }
    }
  ]
};

然后模板里对应改成{{ vm.test }}：

<h1 class="homepage-title">Packages Name {{ vm.test }}</h1>

额外验证：其他配置是否正常？ #

检查了你提供的所有代码：

• 主模块的组件注册、依赖导入逻辑都没问题
• Webpack的raw-loader配置正确，能正常加载HTML模板作为字符串
• ES6类的控制器注入方式也符合AngularJS 1.7的规范

所以只需要解决控制器别名的问题，就能让test变量正常显示了。

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