我已经使用 Angular 将 HTML 拆分为一个 View ，但是当我这样做时，我收到错误:
Argument 'EventController' is not a function
这以前没有任何问题，只是因为我尝试将它们分开并写一条路线，而且我真的很难看出问题是什么？我已经检查了文件的所有拼写、脚本声明等，一切看起来都很好。
我的基本索引页面是:
<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>
我放入 View 中的 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();
}
});
最佳答案
似乎“use strict”导致函数声明由于语法错误而中断，并且不会在控制台中抛出特定的语法错误:
删除多余的()
$scope.scrollToSession() = function() {
// ^^ shouldn't be here
$anchorScroll();
}
关于javascript - 将 HTML 放入 ng-view 时 Controller 不是一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41435275/