未定义的控制器AngularJS

时间:2014-04-30 14:45:51

标签: angularjs angular-ui-router

我的模板正在加载,但是我收到一个错误,控制器是未定义的。控制器确实存在于我的源中,恰好位于定义的位置。这段代码有什么问题?

Error: [ng:areq] Argument '/Scripts/controllers/wizardNavigationCtrl.js' is not a function, got undefined
http://errors.angularjs.org/1.2.14/ng/areq?p0=%2FScripts%2Fcontrollers%2FwizardNavigationCtrl.js&p1=not%20aNaNunction%2C%20got%20undefined 

Index.html(根页)

<div class="container">
    <div ui-view></div>
</div>

wizardLayout.html

<div>
    <ul class="nav nav-tabs">
        <li ng-repeat="model in models" ng-class="active: model.active">
            <a ui-sref=".model-{{model.name}}">model.name</a>
        </li>
        <li ng-class="navStep=='addnew' ? 'active' : ''">
            <a ui-sref=".newmodel"><span class="glyphicon glyphicon-plus"></span></a>
        </li>
        <li><a ui-sref=".other">Other</a></li>
        <li><a ui-sref=".customer">Customer Info</a></li>
        <li><a ui-sref=".shipping">Shipping Info</a></li>
        <li><a ui-sref=".review">Review</a></li>
    </ul>
</div>

<div ui-view>
</div>

app.js:

'use strict';

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('wizard', {
            url: '/',
            templateUrl: 'Scripts/templates/wizardLayout.html',
            controller: 'Scripts/controllers/wizardNavigationCtrl.js'
        })
        .state('wizard.newmodel', {
            url: '/newmodel',
            templateUrl: 'Scripts/templates/wizardModel.html',
            controller: 'Scripts/controllers/wizardModelCtrl.js'
        })
        .state('wizard.other', {
            url: '/other',
            templateUrl: 'Scripts/templates/wizardOther.html',
            controller: 'Scripts/controllers/wizardOtherCtrl.js'
        })
        .state('wizard.customer', {
            url: '/customer',
            templateUrl: 'Scripts/templates/wizardCustomer.html',
            controller: 'Scripts/controllers/wizardCustomerCtrl.js'
        })
        .state('wizard.shipping', {
            url: '/shipping',
            templateUrl: 'Scripts/templates/wizardShipping.html',
            controller: 'Scripts/controllers/wizardShippingCtrl.js'
        })
        .state('wizard.review', {
            url: '/review',
            templateUrl: 'Scripts/templates/wizardReview.html',
            controller: 'Scripts/controllers/wizardReviewCtrl.js'
        });
    }]);

wizardNavigationCtrl.js

myApp.controller('wizardNavigationCtrl', ['wizardSvc', '$scope', function (wizardSvc, $scope) {
    alert('navigation controller! ' + wizardSvc.quote.title);
    $scope.navStep = 'addnew';
    wizardSvc.init();
}])

1 个答案:

答案 0 :(得分:3)

控制器的格式应为MyControllerName,而不是javascript文件的名称和路径。记住,为了使用控制器,浏览器必须已经加载了javascript。这需要使用传统的script标记,因为angular不会为您找到或加载这些脚本。

从您的代码中获取一段代码:

    .state('wizard', {
        url: '/',
        templateUrl: 'Scripts/templates/wizardLayout.html',
        controller: 'wizardNavigationCtrl'
    })

在您需要的页面中的某个位置:

<script src="Scripts/controllers/wizardNavigationCtrl.js" type="text/javascript"></script>

希望有所帮助!