AngularJsで2つcontrollerがあるとエラー

Question

「AngularJSリファレンス」という書籍を読みながら学習です。
下記のようなコードでそれぞれ別々にコードを書くと問題なく動作するのですが、同時に記載するとエラーが発生します。

chromeのターミナルから得られるメッセージは下記のとおりです。
"Argument 'myController2' is not a function, got undefined"

angularの理解がまだ乏しい段階ですが、このようなエラーが発生してしまう原因、また対応方法をご教授いただけると嬉しいです。

両方共にng-controller="myController"にするとエラーは出ません。クリックの方は動作しますが、マウスダウンは動作しません。

よろしくお願いします。

<div ng-controller="myController2">
<p ng-mousedown="mousedown()" ng-style="myStyle">マウスダウンで文字が大きくなる</p>
<script>
	angular.module('app',[]).controller('myController2',['$scope',function($scope){
		$scope.mousedown = function(){
			$scope.myStyle = { fontSize:'x-large'};
		}
	}]);
</script>
</div>

<div ng-controller="myController">
<input type="button" value="クリックで+1" ng-click="count=count+1">
<input type="button" value="クリックで*2" ng-click="click()">
<p>{{count}}</p>
<script>
	angular.module('app',[]).controller('myController',['$scope',function($scope){
		$scope.count =0;//countの初期化
		$scope.click = function(){
			$scope.count = $scope.count *2;
		}
	}])
</script>
</div>

Answer 1

angular.module('app',[]).controller('myController2', ... );
angular.module('app',[]).controller('myController', ... );

１個目の app モジュールが２個目の app モジュールで上書きされてしまうためです。

次のように、第２引数が配列である angular.module を１回だけ呼んで、その後は第２引数を省略するようにすれば大丈夫です。

angular.module('app',[]);
angular.module('app').controller('myController2', ... );
angular.module('app').controller('myController', ... );

Comments

[退会済みユーザー]

エラーがなくなりました。ありがとうございます。