Question

我已经将我的HTML拆分为使用angular的视图，但是当我这样做时，我得到了错误：

参数'EventController'不是函数

这之前没有任何问题，只是因为我尝试将它们分开并编写路线，我真的很难看出问题是什么？我检查了文件的所有拼写，脚本声明等等，一切似乎都很好。

我的基本索引页是：

<html lang="en" ng-app="eventsApp">
    <head>
        <meta charset="utf-8" />
        <title>Create Event</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/app.css"/>
    </head>

    <body>
        <div class="container">
            <div class="navbar">
                <div class="navbar-inner">
                    <ul class="nav">
                        <li><a href="#/events">Events List</a></li>
                        <li><a href="#/newEvent">Create Event</a></li>
                    </ul>
                </div>
            </div>

            <ng-view></ng-view>

        </div>

        <script src="lib/jquery.min.js"></script>
        <script src="lib/underscore-1.4.4.min.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular/angular-resource.js"></script>
        <script src="lib/angular/angular-route.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers/EventController.js"></script>
        <script src="js/controllers/EditEventController.js"></script>
        <script src="js/controllers/EventList.js"></script>
        <script src="js/services/EventData.js"></script>
        <script src="js/filters.js"></script>
    </body>
</html>

我在视图中添加的HTML是：

<div style="padding-left:20px; padding-right:20px;">
    <img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
    <button type="button" class="btn btn-primary" ng-click="scrollToSession()">Scroll to Session</button>
    <div class="row">
        <div class="spann1">
            <!--Style and Bind Template Directives w/ Uppercase Filter-->
            <h2 ng-style="mystyle" ng-bind-template="{{event.name | uppercase}}"></h2>
        </div>
    </div>

    <!--Disabled Directive-->
    <button class="btn" ng-disabled="buttonDisabled">Disabled</button>

    <!--Non-Bindable Directive-->
    <div ng-non-bindable="nonBindable">{{1 + 2}}</div>

    <!--Hide/Show & Class Directive-->
    <h2 ng-show="boolValue">Show This</h2>
    <h2 ng-hide="boolValue" ng-class="myclass">Hide This</h2>

    <div class="row">
        <div class="span3">
            <!--Date Filter-->
            <div><strong>Date:</strong> {{event.date | date:'mediumDate'}}</div>
            <div><strong>Time:</strong> {{event.time}}</div>
            <!--Currency Filter-->
            <div><strong>Price:</strong> {{event.price | currency:'£'}}</div>
        </div>
        <div class="span4">
            <address>
                <strong>Address:</strong><br />
                {{event.location.address}}<br />
                {{event.location.city}}, {{event.location.province}}
            </address>
        </div>
    </div>  

    <!--Expressions-->
    {{[1,2,3][2]}}

    <!--Number Filter-->
    <div>{{3 | number:2}}</div>

    <!--JSON Filter-->
    <div>{{ { a:3, b:'hi', c:{aa:35} } | json }}</div>

    <!--Repeat Directive-->
    <hr />
    <h3>Sessions</h3>
    <div>
        Order By:
        <select ng-model="sortOrder" class="input-small">
            <option value="name">Name Asc</option>
            <option value="-name">Name Desc</option>
            <option value="creatorName">Creator Asc</option>
            <option value="-creatorName">Creator Desc</option>
            <option value="level">Level Asc</option>
            <option value="-level">Level Desc</option>
        </select>

        Show:
        <select ng-model="difficulty.level" class="input-small">
            <option value="">All</option>
            <option value="Advanced">Advanced</option>
            <option value="Introductory">Introductory</option>
            <option value="Intermediate">Intermediate</option>
        </select>
    </div>
    <ul class="thumbnails">
        <li ng-repeat="session in event.sessions | orderBy:sortOrder | limitTo:3 | filter:difficulty" id={{session.id}}>
            <div class="row session">
                <div class="span0 well votingWidget">
                    <div ng-click="upVoteSession(session)" class="votingButton">
                        <i class="icon-chevron-up icon-white"></i>
                    </div>
                    <div class="badge badge-inverse">
                        <div>{{session.upVoteCount}}</div>
                    </div>
                    <div ng-click="downVoteSession(session)" class="votingButton">
                        <i class="icon-chevron-down icon-white"></i>
                    </div>
                </div>
                <div class="well span9">
                    <h4 class="well-title">{{session.name}}</h4>
                    <h6 style="margin-top:-10px;">{{session.creatorName}}</h6>
                    <!--Custom Filter-->
                    <span>Duration: {{session.duration | durations}}</span><br />
                    <span>Level: {{session.level}}</span>

                    <p>{{session.abstract}}</p>
                </div>
            </div>
        </li>
    </ul>
</div>

路线数据是：

var eventsApp = angular.module('eventsApp', ['ngResource', 'ngRoute'])
    .config(function($routeProvider){
        $routeProvider.when('/newEvent', {
            templateUrl:'templates/NewEvent.html',
            controller: 'EditEventController'
        });
        $routeProvider.when('/events', {
            templateUrl: 'templates/EventList.html',
            controller: 'EventListController'
        });
        $routeProvider.when('/events/:eventId', {
            templateUrl: 'templates/EventDetails.html',
            controller: 'EventController'
        });
    }
);

EventController.js文件：

'use strict';

eventsApp.controller('EventController', function($scope, eventData, $anchorScroll){

    $scope.snippet = '<span style="color:red;">hi there</span>';

    $scope.boolValue = false;

    $scope.mystyle = {color:'red'};

    $scope.myclass = "blue";

    $scope.buttonDisabled = false;

    $scope.nonBindable = true;

    $scope.sortOrder = 'name';

    $scope.difficulty = "";

    eventData.getEvent()
        .$promise.then(
            function(event) {$scope.event = event; console.log(event);}
        ).catch(function(response) {console.log(response);}
    );

    $scope.upVoteSession = function(session){
        session.upVoteCount++;
    }

    $scope.downVoteSession = function(session){
        session.upVoteCount--;
    }

    $scope.scrollToSession() = function() {
        $anchorScroll();
    }
});

Answer 1

似乎＆＃34;使用严格＆＃34;导致函数声明因语法错误而中断，并且没有在控制台中抛出特定的语法错误：

删除额外的()

$scope.scrollToSession() = function() {
                   // ^^ shouldn't be here
        $anchorScroll();
}

Answer 2

我想因为在定义控制器时没有对模块的引用，所以它不会按照它应该定义它。所以尝试改变你的第一行：

eventsApp.controller('EventController', ...

为：

angular.module('eventsApp').controller('EventController', ...

请注意，eventsApp只是主文件中的局部变量。

Answer 3

您在哪个文件中定义eventsApp？看起来您可能在加载之前尝试使用EventController。

将HTML放入ng-view

3 个答案: