Angular组件控制器未加载：绑定属性未挂载至this对象问题

我来帮你搞定这个Angular 1.x组件的问题，你的代码里有几个关键细节需要调整，才能让绑定生效、控制器正常工作：

1. 用$onInit生命周期钩子获取绑定值 #

Angular 1.5+的组件中，绑定的属性不会在控制器构造函数执行时就立刻赋值到this上，而是要等到组件初始化完成的$onInit钩子触发后，绑定值才会被挂载到控制器实例上。你需要把访问绑定属性的逻辑放到这个钩子里面：

angular.module("app.components")
 .component('testWidget', {
 templateUrl: '/Widgets/TestWidget/Templates/TestWidget.template.html',
 bindings: { something: "=" },
 controller: function () {
 var ctrl = this;
 // 新增$onInit钩子
 ctrl.$onInit = function() {
   // 这里就能正常访问ctrl.something了
   console.log("绑定的值：", ctrl.something);
 };
 }
 });

2. 修正绑定类型或传入值的方式 #

你现在用的是双向绑定=，但在模板里直接写了something="Shoopy"——这种写法会让Angular去当前作用域里找名为Shoopy的变量，而不是把它当作静态字符串处理。

• 如果只是要传递静态字符串，把绑定类型改成@（单向字符串绑定）：

  bindings: { something: "@" },
  

  模板保持不变即可：

  <test-widget something="Shoopy"></test-widget>
  

• 如果确实需要双向绑定（比如绑定父作用域的变量），要确保父作用域里有对应的变量：

  <div ng-app="app" ng-init="parentVal = 'Shoopy'">
   <test-widget something="parentVal"></test-widget>
  </div>
  

3. 检查模板路径是否有效 #

如果/Widgets/TestWidget/Templates/TestWidget.template.html这个路径不对，或者模板文件不存在，Angular加载模板失败会直接导致组件控制器无法正常初始化。你可以打开浏览器开发者工具（F12）的「网络」面板，看看有没有404错误，确认模板路径是否正确。

4. 确认脚本加载顺序 #

要保证脚本加载顺序是：先加载定义app.components模块的脚本，再加载定义app模块的脚本，最后加载包含组件的HTML页面。顺序错了会出现模块未定义的错误，组件自然无法注册生效。

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