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

directiveメソッド、priority属性、terminal属性について(基本)

2013年12月11日 / category : angularjs, directive, lab

directiveメソッドのpriority属性とterminal属性について色々と試してみます。
priority属性は、同じDOM要素にdirectiveメソッドが複数ある場合に、実行順序を指定できる属性です。

A: priority属性の指定なし(デフォルト)

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<div priority-a priority-b priority-c priority-d priority-e></div>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.count = 0;
	$scope.set = function(_str, _element){
		$scope.count++;
		_element.append('<p>' + _str + ' : ' + $scope.count + '番目に実行されました。</p>');
	};
}]);

myApp.directive('priorityA', function(){
	return {
		link: function(_scope, _element){
			_scope.set('A', _element);
		}
	};
});

myApp.directive('priorityB', function(){
	return {
		link: function(_scope, _element){
			_scope.set('B', _element);
		}
	};
});

myApp.directive('priorityC', function(){
	return {
		link: function(_scope, _element){
			_scope.set('C', _element);
		}
	};
});

myApp.directive('priorityD', function(){
	return {
		link: function(_scope, _element){
			_scope.set('D', _element);
		}
	};
});

myApp.directive('priorityE', function(){
	return {
		link: function(_scope, _element){
			_scope.set('E', _element);
		}
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/priority/0/
■解説
サンプルを見ていただければわかる通り、priority指定がない場合は、属性の後ろから実行されるようです。

<div priority-a priority-b priority-c priority-d priority-e></div>

実行順
priorityE → priorityD → priorityC → priorityB → priorityA

B: priority属性の指定あり

■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.count = 0;
	$scope.set = function(_str, _element){
		$scope.count++;
		_element.append('<p>' + _str + ' : ' + $scope.count + '番目に実行されました。</p>');
	};
}]);

myApp.directive('priorityA', function(){
	return {
		priority: 1,
		link: function(_scope, _element){
			_scope.set('A', _element);
		}
	};
});

myApp.directive('priorityB', function(){
	return {
		priority: 2,
		link: function(_scope, _element){
			_scope.set('B', _element);
		}
	};
});

myApp.directive('priorityC', function(){
	return {
		priority: 3,
		link: function(_scope, _element){
			_scope.set('C', _element);
		}
	};
});

myApp.directive('priorityD', function(){
	return {
		priority: 4,
		link: function(_scope, _element){
			_scope.set('D', _element);
		}
	};
});

myApp.directive('priorityE', function(){
	return {
		priority: 5,
		link: function(_scope, _element){
			_scope.set('E', _element);
		}
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/priority/1/
■解説
priority属性の指定をすると、サンプルの通り、指定通りの順番で実行してくれます。

C: terminal属性の指定あり

■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.count = 0;
	$scope.set = function(_str, _element){
		$scope.count++;
		_element.append('<p>' + _str + ' : ' + $scope.count + '番目に実行されました。</p>');
	};
}]);

myApp.directive('priorityA', function(){
	return {
		priority: 1,
		link: function(_scope, _element){
			_scope.set('A', _element);
		}
	};
});

myApp.directive('priorityB', function(){
	return {
		riority: 2,
		link: function(_scope, _element){
			_scope.set('B', _element);
		}
	};
});

myApp.directive('priorityC', function(){
	return {
		priority: 3,
        	terminal: true,
		link: function(_scope, _element){
			_scope.set('C', _element);
		}
	};
});

myApp.directive('priorityD', function(){
	return {
		priority: 4,
		link: function(_scope, _element){
			_scope.set('D', _element);
		}
	};
});

myApp.directive('priorityE', function(){
	return {
		priority: 5,
		link: function(_scope, _element){
			_scope.set('E', _element);
		}
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/priority/2/
■解説
terminal属性は、priority属性と一緒に使用します。terminal属性をtrueに設定すると、設定したpriority属性より小さいdirectiveメソッドは実行されなくなります。