Question

我收到以下错误：

Argument 'mainController' is not a function, got undefined

这很奇怪，因为代码在我开始向应用程序添加页面和内容之前有效。

HTML

<!DOCTYPE html>
<html lang="en" id="top" ng-app="myApp">
<head>
 <title>Website</title>

 <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
 <link rel="stylesheet" href="css/main.css"/>

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

  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/main.js"></script>

</head>

<body ng-controller="mainController">

<div class="menu">
    <ul>
        <li><a href="#messages">Messages</a></li>
        <li><a href="#settings">Settings</a></li>
    </ul>
</div>

<div class="wrapper" ng-view></div>

</body>
</html>

JS

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

myApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/dashboard.html',
            controller  : 'mainController'
        })

        // route for the settings page
        .when('/settings', {
            templateUrl : 'pages/settings.html',
            controller  : 'settingsController'
        });
});

我从模板开始编写代码。

Answer 1

您将html（绑定它）中的控制器实例引用混淆为实际创建您的应用程序中的控制器。

从你的根应用程序模块声明它。

myApp.controller('mainController', ['$scope', function ($scope) {

}]};

此外，由于您要声明模板和控制器对，因此无法将控制器绑定到body元素上。您应该将其绑定在相应的模板中。

<div class="menu" ng-controller="mainController">
    <ul>
        <li><a href="#messages">Messages</a></li>
        <li><a href="#settings">Settings</a></li>
    </ul>
</div>

如果您绝对希望将其绑定到body元素，请将其从路由声明中删除。

参数控制器不是函数，未定义

1 个答案: