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

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

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

directiveメソッドのrequire属性についてまとめます。
require属性は、親要素のdirectiveメソッド内のcontroller属性で定義されたAPIを取得できるようにする機能です。

A: ‘^require名’

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<div parent-directive>
<div child-directive></div>
</div>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

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

myApp.directive('parentDirective', function(){
	return {
		controller: ['$scope', function($scope){
			$scope.msg = 'かきくけこ';
			this.openAlert = function(){
				alert( $scope.msg );
			}
		}]
	};
});

myApp.directive('childDirective', function(){
	return {
		require: '^parentDirective',
		link: function(_scope, _element, _attrs, _parentCtrl){
			_parentCtrl.openAlert();
		}
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/require/0/
■解説
require属性に、親要素のdirectiveメソッドを指定した要素parentDirectiveを指定します。指定する際は、先頭に「^」を付けます。
これで、要素parentDirectiveのdirectiveメソッド内で設定したcontroller属性を、link属性の第4引数に渡すことができます。