吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

外部HTMLの読み込み、controller指定とcontrollerAs指定の違い

2013年11月26日 / category : angularjs, lab, その他

前回のサンプルでは、外部HTMLを読み込むサンプルを紹介しました。
その際、ngRouteモジュールのwhen関数には、コンストラクタ関数の指定方法が2種類あると書きました。
今回はそのもう1つの方法を紹介します。

前回のサンプルは、

$routeProvider.when('URL', {
    templateUrl: 'HTMLの参照先',
    controller: コントローラー名(コンストラクタ関数名)
}

controllerの値を指定することで、コンストラクタ関数を設定していました。
また、controllerで指定した場合のコンストラクタ関数は、グローバル関数で指定する必要がありました。

//グローバル関数
function コンストラクタ関数名($scope){
	//関数処理
};

今回紹介するもう1つの指定方法は、
controllerAsで指定する方法です。

$routeProvider.when('URL', {
    templateUrl: 'HTMLの参照先',
    controllerAs: 'コントローラー名(コンストラクタ関数名)'
}

controllerAsの値は、文字列(String)で指定します。
そして、今回はコントロール関数を使用する方法に変更しますので、コンストラクタ関数の記述は下記のようになります。

myApp.controller('コンストラクタ関数名', ['$scope', function($scope){
	//関数処理
}]);

以上の内容で一度、サンプルを見てみます。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/4_0/
■サンプルファイル一式
ダウンロード – zip

一見うまく動作しているように見えますが、
1点、うまく動作していない箇所があります。

外部HTML内の、{{msg}}がうまく取得できていません。

<p>view msg : {{msg}}</p>

ページを切り替えても、下記の文言のままになっていると思います。
view msg : html = index.html, ng-controller = MainCtrl

正しくは、「赤いかぼちゃ」のときは、
view msg : html = templateA.html, ng-controller = CtrlA

「黄色いかぼちゃ」のときは、
view msg : html = templateB.html, ng-controller = CtrlB

となります。
これは、下記のスクリプトがうまく動作していないのが原因です。

myApp.controller('CtrlA', ['$scope', function($scope){
	$scope.msg = 'html = templateA.html, ng-controller = CtrlA';
}]);

myApp.controller('CtrlB', ['$scope', function($scope){
	$scope.msg = 'html = templateB.html, ng-controller = CtrlB';
}]);

この原因は、controller関数を使用する際は、HTML側にng-controller属性を指定する必要があるためです。(おそらく)

ということで、外部HTMLの「templateA.html」「templateB.html」のコードを、変更してみます。

■HTML – templateA.html
<div ng-controller="CtrlA">
<p><img src="images/photo0.jpg" width="640" height="427" alt=""></p>
<p>view msg : {{msg}}</p>
</div>
■HTML – templateB.html
<div ng-controller="CtrlB">
<p><img src="images/photo1.jpg" width="640" height="427" alt=""></p>
<p>view msg : {{msg}}</p>
</div>

この内容で、確認してみます。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/4_1/
■サンプルファイル一式
ダウンロード – zip

これで、各外部HTMLの{{msg}}がうまく変更されると思います。