2017-01-03 8 views
0

NG-ビューにHTMLを配置角度の使用が、私はそうやったとき、私はエラーを取得しない機能:これはで以前働いていたコントローラ私はビューにオフに私のHTMLを分割しました

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> 

私はビューに入れている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(); 
    } 
}); 
+0

を削除し、そのコントローラがこれまでに 'のように異なって宣言されましたイベントコントローラ( 'EventController'、EventController) '...' function EventController($ scope、eventData、$ anchorScroll'?) – charlietfl

+0

これはいつもイベントコントローラでした - 変更したことはありません –

+0

ok ...名前付き関数?エラーの引数の部分は私に不思議に思った – charlietfl

答えて

2

「厳格な使用は、」関数宣言が原因構文エラーを破る原因とコンソールで特定の構文エラーを投げていないようです:

余分()

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

eventsAppではどのファイルを定義していますか?あなたがEventControllerをロードする前にそれを使用しようとしているようです。

enter image description here

+0

これは、イベントコントローラのコントローラの前にロードする必要があるapp.jsにあります。 –

+0

ロード前に実際に使用することはできません... domはロードされ、同じモジュールが既に存在するまで – charlietfl

1

私はそれが必要として、それはそれを定義しませんコントローラを定義するとき、あなたのモジュールへの参照を持っていないので、推測します。 eventsAppがあなたのメインファイル内だけのローカル変数であることを

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

注:に

eventsApp.controller('EventController', ... 

:だからからあなたの最初の行を変更してみてください。

+0

これは一般的にはより良い方法です – charlietfl

+0

Nopeはまだ動作しません - 同じエラー –

+0

あなたのコンソールに他のエラーがありますか? – Yaser

関連する問題