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

filterのカプセル化

2013年12月12日 / category : angularjs, filter, lab

filterのカプセル化と呼ばれる方法があるみたいです。
これは、filter機能をcontrollerメソッドの中に入れる仕組みです。
構文は下記の通りです。

■JavaScript – app.js
myApp.filter('フィルター名', function(){
	return function(_value, _param){
		return //フィルター処理
	};
});

myApp.controller('コントローラー名', ['$scope', 'フィルター名+Filter', function($scope, _filter){
	$scope.value = _filter(_value,_param);
}]);

html側(ビューテンプレート)でフィルターを使用する方法と、コントローラーにカプセル化したフィルターを使用する方法を比較して見てみます。

A: カスタムフィルターのカプセル化

■HTML – index.html
//html側(ビューテンプレート)でフィルターを使用する方法
<div class="wrap" ng-controller="CtrlA">
<dl>
<dt>通常のフィルター</dt>
<dd>
<p>{{msg|reverse:true}}</p>
</dd>
</dl>
</div>

//コントローラーにカプセル化したフィルターを使用する方法
<div class="wrap" ng-controller="CtrlB">
<dl>
<dt>フィルターのカプセル化</dt>
<dd>
<p>{{msg}}</p>
</dd>
</dl>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.filter('reverse', function(){
	return function(_value, _param){
		var _str = '';
		for( var i=0; i<_value.length; i++ ){
			_str = _value.charAt(i) + _str;
		}
		return _str;
	};
});

myApp.controller('CtrlA', ['$scope', function($scope){
	$scope.msg = 'あいうえお';
}]);

myApp.controller('CtrlB', ['$scope', 'reverseFilter', function($scope, reverseFilter){
	$scope.msg = 'あいうえお';
	$scope.msg = reverseFilter($scope.msg,true);
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/14/1/
■解説
カプセル化は、フィルターをコントローラーの中に入れる仕組みですので、フィルターの効果自体に変更有りません。ですので、html側(ビューテンプレート)にフィルターを使用する場合と結果は同じになります。

B: AngularJS定義済みフィルターのカプセル化

■HTML – index.html
//html側(ビューテンプレート)でフィルターを使用する方法
<div class="wrap" ng-controller="CtrlA">
<dl>
<dt>通常のフィルター</dt>
<dd>
<ul ng-repeat="item in items | filter:'あ'">
<li>{{item.msg}}</li>
</ul>
</dd>
</dl>
</div>

//コントローラーにカプセル化したフィルターを使用する方法
<div class="wrap" ng-controller="CtrlB">
<dl>
<dt>フィルターのカプセル化</dt>
<dd>
<ul ng-repeat="item in items">
<li>{{item.msg}}</li>
</ul>
</dd>
</dl>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('CtrlA', ['$scope', function($scope){
	$scope.items = [
		{msg: 'あいうえお'},
		{msg: 'かきくけこ'},
		{msg: 'さしすせそ'},
		{msg: 'たちつてと'},
	];
}]);

myApp.controller('CtrlB', ['$scope', 'filterFilter', function($scope, filterFilter){
	$scope.items = [
		{msg: 'あいうえお'},
		{msg: 'かきくけこ'},
		{msg: 'さしすせそ'},
		{msg: 'たちつてと'},
	];
	$scope.items = filterFilter($scope.items, 'あ');
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/14/0/