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

$windowの使い方

2013年12月13日 / category : angularjs, lab, その他

$windowの使い方の紹介をします。
$windowは、windowオブジェクトを参照します。
controllerメソッド内で使う方法と、directiveメソッド内で使う方法を2パターン

A: controllerメソッド内で$windowを使用

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

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

	var msg = 'Hello world !';

	$scope.alert = function(){
		$window.alert(msg);
	};

}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/16/0/

B: directiveメソッド内で$windowを使用

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

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

}]);

myApp.directive('myClick', function($window){
	return function(scope, element, attrs){

		var msg = 'Hello world !';

		scope.alert = function(){
			$window.alert(msg);
		};

	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/16/1/