Question

也许它只是一个非常简单的答案，但即使有关于这个主题的可用问题，我也无法弄清楚为什么我的控制器没有实例化。

我写了两个console.log语句：一个在 app.config.js 中，另一个在 expense-stub.component.js 文件中控制器被声明。由于某种原因，第一个控制台日志被执行，所以我知道输入了app.config。但不知何故，我的控制器没有实例化。

我希望有一些好的建议来解决这个问题:-)感谢您的帮助！

我的代码如下：

HTML代码段

<div>

<div ng-app="expensesApp" class="jumbotron view-container">
    <ng-view class="view-frame"></ng-view>
</div>

</div>

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-animate.js"></script>

<link href="expensableApp/app.animation.css" type="text/css" rel="stylesheet"/>

<script src="expensableApp/app.js"></script>
<script src="expensableApp/app.config.js"></script>
<script src="expensableApp/expenses-stub/expenses-stub.module.js"></script>
<script src="expensableApp/expenses-stub/expenses-stub.component.js"></script>

app.js

(function () {

var expensesApp = angular.module('expensesApp', ['ngAnimate', 'ngRoute', 'expensesStub']);

})();

app.config.js

angular.module('expensesApp')
.config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider){
        console.log("Expenses config entered"); //appears in console log
        $locationProvider.hashPrefix('!');
        $routeProvider
            .when('/expenses', {
                template: '<expenses-page></expenses-page>'
            })
            .otherwise('/expenses')
    }
]);

费用-stub.module.js

angular.module('expensesStub', []);

费用-stub.component.js

angular.module('expensesStub')
.component('expensesStub',{
    templateUrl: 'expensableApp/expenses-stub/expenses-page.template.html',
    controller: ['', function ExpensesStubController () {
        //the console log statement below does not appear in the console log, still wondering why...
        console.log("Expenses Controller instantiated!");
    }]
});

费用-page.template.html

<div class="container">
    <h2 class="col-xs-12">Hello World!</h2>
</div>

Answer 1

George在他的评论中提出了一个解决方案，但这对我不起作用，因为我会强制从HTML中删除<ng-view>指令。但他让我朝着正确的方向前进。

我发现在上面的代码中我在app.config.js文件中提到了一个错误的模板。我使用html文件的名称作为模板的名称，但这必须是模块的名称。我修复了上面的app.config文件，如下所示：

angular.module('expensesApp')
.config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider){
        console.log("Expenses config entered"); //appears in console log
        $locationProvider.hashPrefix('!');
        $routeProvider
            .when('/expenses', {
                template: '<expenses-stub></expenses-stub>'
            })
            .otherwise('/expenses')
    }
]);

这样我仍然可以让<ng-view>控制我的观点。

角度控制器未实例化/工作

1 个答案: