AngularJSをScala Playで使用すると、以下のようなエラーが発生します。
エラーです。Argument 'MainCtrl' is not a function, got undefined.
曜日で構成されたテーブルを作成しようとしています。
私のコードを見てください。Controllerの名前は確認していましたが、正しいようです。注:コードはこのSOから使用されています 回答.
index.scala.htmlを参照してください。
@(message: String)
@main("inTime") {
<!doctype html>
<html lang="en" ng-app>
<head>
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
</head>
<div ng-controller="MainCtrl">
<table border="1">
<tbody ng-repeat='(what,items) in data'>
<tr ng-repeat='item in items'>
<td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
</html>
}
MainCtrl.jsの
(function() {
angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
$scope.data = {
Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
}
});
}());
モジュールの名前([myApp])から[[]`を削除する
angular.module('myApp', [])
そして、htmlにng-app="myApp"
を追加すれば、動作するはずです。
FIRST.
ルート定義の中で、定義しているコントローラ名と同じ controller
が正しく設定されているか確認してください。
communityMod.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/members', {
templateUrl: 'modules/community/views/members.html',
controller: 'CommunityMembersCtrl'
}).
otherwise({
redirectTo: '/members'
});
}]);
communityMod.controller('CommunityMembersCtrl', ['$scope',
function ($scope) {
$scope.name = 'Hello community';
}]);
この例のようにコントローラ名が異なるとエラーになりますが、この例は正しいです。
次に javascriptファイルがインポートされているかどうかを確認してください。
`` <script src="modules/community/controllers/CommunityMembersCtrl.js"></script>````
同じエラーメッセージ(私の場合:"Argument 'languageSelectorCtrl' is not a function, got undefined")が表示されました。
Angular seed'のコードと比較した結果、app.js内のcontrollersモジュールへの参照を削除していたことがわかりました。(https://github.com/angular/angular-seed/blob/master/app/js/app.js で見つけてください)
その結果、次のようになりました。
angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])
これは失敗しました。
で、足りないリファレンスを追加すると
angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])
エラーメッセージが消え、Angularは再びコントローラをインスタンス化できるようになりました。