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

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

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

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

A: 基本形(controller属性なし)

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

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

myApp.directive('myDirective', function(){
	return {
		template:'<p>msg : {{msg}}</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/controller/0/
■解説
controllerメソッドで定義した「$scope.msg」が、directiveメソッド内に引き継がれ、「{{msg}}」に代入されています。

B: controller属性で上書き

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

myApp.directive('myDirective', function(){
	return {
		controller: ['$scope', function($scope){
			$scope.msg = 'かきくけこ';
		}],
		template:'<p>msg : {{msg}}</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/controller/1/
■解説
directiveメソッド内のcontroller属性で新たにscopeを生成し、controllerメソッドのscopeから上書きしたため、変数msgは「あいうえお」から「かきくけこ」へ変更されています。

C: 外部で用意したcontrollerメソッドを代入

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

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.msg = 'あいうえお';
	$scope.ctrl_txt = 'アイウエオ';
}]);

myApp.controller('Ctrl2', ['$scope', function($scope){
	$scope.msg = 'かきくけこ';
	$scope.ctrl2_txt = 'カキクケコ';
}]);

myApp.directive('myDirective', function(){
	return {
		controller: 'Ctrl2',
		template:'<p>msg : {{msg}}</p><p>ctrl_txt : {{ctrl_txt}}</p><p>ctrl2_txt : {{ctrl2_txt}}</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/controller/2/
■解説
directiveメソッド内のcontroller属性に別のcontrollerメソッドを代入しています。同じ名前の変数msgは上書きされますが、それ以外は継承されますので、取得ができます。