角度控制器不是一个功能

时间:2016-08-28 03:59:17

标签: angularjs asp.net-mvc

这似乎是与Angular一个非常常见的主题的另一个变体。我有一个没有被拿起的控制器,我无法确定缺少什么。

以下是关键领域:

我的Layout.cshtml页面包含以下内容:

        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="http://cdn.date-fns.org/v1.3.0/date_fns.min.js"></script>

        <script src="~/js/utility/utility.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>

        <script src="~/js/app.js"></script>

        <script src="~/js/utility/config.js"></script>

        <!-- models -->
        <script src="~/js/models/game.js"></script>

        <!-- services -->
        <script src="~/js/services/game.js"></script>

        <!-- controllers -->
        <script src="~/js/controllers/home-controller.js"></script>

App.ts看起来像这样:

/// <reference path="utility/utility.ts" />

var app;
(function () {
    'use strict';

    app = angular.module(Utility.Resources.appName, ['ngRoute'])

})();

我的config.ts设置如下(在路线中有一些故意的冗余开始):

(function () {
    'use strict';

    app.config(function ($routeProvider, $locationProvider) {
        console.info('routes');
        $routeProvider.when(Utility.Urls.game, {
            templateUrl: Utility.Templates.game
        }).when(Utility.Urls.home, {
            templateUrl: Utility.Templates.home
        }).when(Utility.Urls.team, {
            templateUrl: Utility.Templates.team
        }).otherwise({
            redirectTo: Utility.Urls.home
            //templateUrl: Utility.Templates.home
        });

        $locationProvider.html5Mode(true);
    });


    app.run(function ($rootScope, $location) {

        console.info('running'); 

        $rootScope.$on('$routeChangeStart', function (event, nextRoute, currentRoute) {
            console.info("Started");
        });
    });
})();

有问题的控制器看起来像这样:

var Controllers;
(function (Controllers) {
    'use strict';
    var Home = (function () {
        function Home($scope, gameService) {
            $scope.vm = this;
            console.info("In Home Controller");

            $scope.games = [];
            $scope.categories = [];
            $scope.selectedGame = {};

            gameService = gameService;
            $scope.get = function () {
                console.info("Getting");
            };

        }
        Home.$inject = [
            Utility.Angular.$scope, Utility.Services.gameService
        ];
        return Home;
    }());
    Controllers.Home = Home;
})(Controllers || (Controllers = {}));

到目前为止,我看不到任何明显缺失的东西,但在打开主页模板时......

<div class="row" ng-controller="Controllers.Home">
    <div class="col-md-3">
        <h3>Games</h3>
        <ul class="list-group">
            <li class="list-group-item list-group-item-info" ng-repeat="game in games" id="{{game.Id}}" ng-click="get(game.Id)">
                <div>
                    <p><span class="meta">{{game.Date}}</span> <span class="pull-right"><i class="glyphicon glyphicon-calendar"></i> {{game.Season}}</span></p>
                    <p>{{game.Team.Name}} vs {{game.Opposition}}</p>
                </div>
            </li>
        </ul>
    </div>

...调试器返回以下错误:Argument 'Controllers.Home' is not aNaNunction, got undefined

所以我确定我忽视了一些事情。也许是我的控制器或其中一个模型的依赖?除非我在调试器中没有看到任何表明存在问题的错误。

有什么想法吗?

更新 georgeawg基本上是正确的。缺少的部分在我的配置中:

app.config(function ($routeProvider, $locationProvider) {
    console.info('routes');
    $routeProvider.when(Utility.Urls.game, {
        templateUrl: Utility.Templates.game
    }).when(Utility.Urls.home, {
        templateUrl: Utility.Templates.home,
        controller: Controllers.Home // <- here
        ...

1 个答案:

答案 0 :(得分:1)

务必将模块的控制器功能声明为控制器类型。

app.controller("Controllers.Home", Controllers.Home);

来自文档:

  

错误:ng:areq

     

Bad Argument

Argument 'Controllers.Home' is not a function, got undefined
           

描述

     

AngularJS经常声称某些值会出现并且使用辅助函数来实现。如果断言失败,则抛出此错误。要解决此问题,请确保定义断言所需的值并匹配错误中提到的类型。

- AngularJS Error Reference -- $compile -- ng:areq