AngularJSでグローバルに利用できるモデルを定義
多くのサイトで紹介されているAngularJSのモデル定義方法は、HTML内にngModel
として以下のように宣言する。
<div ng-controller="ExampleController"> <form name="userForm"> Name: <input type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }" /> </form> <pre>user.name = <span ng-bind="user.name()"></span></pre> </div>
Factoryクラスの定義
リアルタイムなモデルの値変更をする場合はこれでよいが、ユーザーモデルのように、複数のコントローラで使用されるモデルが存在するならFactoryクラスを定義するのがよい。
angular('myModule').factory('User', function () { /** * コンストラクター */ function User (name) { this.name = name; } /** * ゲッターメソッド */ User.prototype.getName = function () { return this.name; } /** * セッターメソッド */ User.prototype.setName = function (name) { this.name = name; } return User; });
Factoryクラスの使用
コントローラー内でモデルを使用するなら以下のように書く
var injector = angular.injector(['myModule', 'ng']); var User = injector.get('User'); app.controller('UserCtrl', ['$scope', function($scope) { var username = $scope.name; var user = new User(username); }]);