Javascript 在组件方法上使用带$scope的控制器时遇到问题

我一直在学习“理解组件”（）。我试图将主控制器（MainCtrl）更改为使用$scope而不是ctrl（如示例所示）。但不管我做什么，我都不能让它工作

下面是我如何更改index.js的

(function(angular) {
    'use strict';
    angular.module('heroApp', [])
    .controller('MainCtrl', ['$scope',  MainCtrl]);

    function MainCtrl($scope) {
      $scope.hero = {
        name: 'Spawn'
      };
    }
})(window.angular);

Index.html（仅指身体部位）：

和herodeil.html：

<span>Name: {{$hero.name}}</span>

Name:{{$hero.Name}

您缺少的部分是，当您使用组件时，就像您使用的

英雄细节

一样，默认情况下，控制器实例在作用域上填充为

$ctrl

，但您可以通过组件选项来更改

由于没有指定其他名称，因此

herodeil.html

的正确标记为：

Name:{{$ctrl.hero.Name}

这是一个完整的、有效的代码演示

（函数（角度）{
"严格使用",；
angular.module（'heroApp'，[]）
.controller（'MainCtrl'，['$scope'，MainCtrl]）；
函数MainCtrl（$scope）{
$scope.hero={
名称：“繁殖”
};
}
})（窗口角度）；
（功能（角度）{
"严格使用",；
角度。模块（'heroApp'）。组件（'heroDetail'{
templateUrl:'heroDetail.html'，
绑定：{
英雄：'='
}
});
})（窗口角度）

英雄为{{Hero}}

名称：{{$ctrl.hero.Name}
您缺少“”。试试这个：
我刚才试过了。仍然是相同的结果：Hero for{“name”：“Spawn”}name:您也可以添加Hero细节指令的代码吗？
(function(angular) {
  'use strict';
angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  bindings: {
    hero: '='
  }
});
})(window.angular);

<span>Name: {{$hero.name}}</span>