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

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

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

directiveメソッドのscope属性について色々と試してみます。

A: 論理値指定

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<div my-scope-true></div>
<div my-scope-false></div>
</div>
■CSS – styles.css
.wrap .ng-scope{
	color:#f00;
}
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.msg = 'Hello world !';
}]);

myApp.directive('myScopeTrue', function(){
	return {
		scope: true,
		template: '<p class="sample">{{msg}}'</p>'
	};
});

myApp.directive('myScopeFalse', function(){
	return {
		scope: false,
		template: '<p class="sample">{{msg}}'</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/scope/0/
■解説
directiveメソッドをhtml側のmy-scope-true属性、my-scope-false属性に対し、それぞれ設定していますが、違いはscope属性の値だけです。
出力されるソースはそれぞれ下記の通りです。

scope: true

<div class="ng-scope" my-scope-true="">
<p class="sample ng-binding">Hello world !</p>
</div>

scope: false

<div my-scope-false="">
<p class="sample ng-binding">Hello world !</p>
</div>;

scope属性にtrueを設定した場合、class=”ng-scope”が追加されます。
falseの場合は、追加されません。

B: {‘=prop’}

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

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.propA = 'Property A';
	$scope.propB = 'Property B';
}]);

myApp.directive('myScope', function(){
	return {
		scope: {
			msg: '=prop'
		},
		template: '<p class="sample">{{msg}}</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/scope/1/
■解説
html側で設定したprop属性の値が、それぞれ$scopeで定義した変数となります。
directiveメソッド内のscope属性で、prop属性を取得します。取得した値を変数msgに格納し、出力しています。

C: {‘&function’}

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<div my-scope ng-click="openAlert()"></div>
</div>
■JavaScript – app.js
myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.openAlert = function(){
		alert('openAlert');
	};
}]);

myApp.directive('myScope', function(){
	return {
		scope: {
			alert: '&openAlert'
		},
		template: '<p><a href ng-click="alert">アラートを出す</a></p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/scope/2/
■解説
html側で設定したイベントopenAlert()が、$scopeで設定したfunctionとなります。
directiveメソッド内のscope属性で、関数名を変数alertに格納し、template属性の値に設定します。

D: {‘@attributes’}

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<div my-scope msg="あいうえお"></div>
<div my-scope msg="かきくけこ"></div>
<div my-scope msg="さしすせそ"></div>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){

}]);

myApp.directive('myScope', function(){
	return {
		scope: {
			txt: '@msg'
		},
		template: '<p>{{txt}}</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/scope/3/
■解説
html側でmsg属性にそれぞれ値を設定します。
directiveメソッド内のscope属性で、変数txtにそれぞれmsg属性を格納し、template属性の値に設定します。