参考にさせて頂いたページ
AngularJSの$scopeをController as で置き換えるべき理由 - Qiita
ng-app.jsの記述内容
// myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録 app.controller('SampleCtrl', function() { // デフォルトの値を設定 this.msg = 'こんにちは、誰かさん!'; // ng-click="sample.onclick"なので、this.onclickメソッドを定義 this.onclick = function() { this.msg = 'こんにちは、' + this.name + 'さん!'; }; });
index.htmlの記述内容
<div ng-controller="SampleCtrl as sample"> <input type="text" ng-model="sample.name" /> <button ng-click="sample.onclick()">送信</button> <div>{{sample.msg}}</div> </div>
このソースコードについて
前回の記事AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampleCtrlを登録して使う - MOTOMICHI WORKS BLOGをもとにして少し変更した。
まずng-controller="SampleCtrl as sample"
とすることで、このdivの範囲内で使用するsample
と、ng-app.js内のthis
が紐付く。
ng-app.js内では、今回$scopeを使用していないので、引数$scopeを削除した。
Controller as構文の優位性について
コントローラーに親子関係がある場合は「Controller as構文を使用する方が優位性がある」という事について、 参考にさせて頂いたAngularJSの$scopeをController as で置き換えるべき理由 - Qiitaに詳細に書かれており、またそのときがきたら復習しようと思う。