umidjons/angularjs-custom-directive.html

## angularjs-custom-directive.html
<!doctype html>
<html lang="en-US" data-ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Custom Directive</title>
    <script type="text/javascript" src="js/angular.js"></script>
</head>
<body data-ng-controller="SomeController">

<button data-ng-click="clickUnfocused()">Not Focused</button>
<button data-ng-click="clickFocused()" ngbk-focus>I'm very Focused!</button>
<div>{{message.text}}</div>

<script type="text/javascript">
    var myModule = angular.module( 'app', [] )
        .directive( 'ngbkFocus', function ()
                    {
                        return {
                            link: function ( scope, element, attrs, controller )
                            {
                                element[0].focus();
                            }
                        }
                    } )
        .controller( 'SomeController', function ( $scope )
                     {
                         $scope.message = {text: 'Nothing clicked'};

                         $scope.clickUnfocused = function ()
                         {
                             $scope.message.text = 'Unfocused button clicked';
                         }

                         $scope.clickFocused = function ()
                         {
                             $scope.message.text = 'Focused button clicked';
                         }
                     } );

</script>

</body>
</html>
	<!doctype html>
	<html lang="en-US" data-ng-app="app">
	<head>
	<meta charset="UTF-8">
	<title>AngularJS Custom Directive</title>
	<script type="text/javascript" src="js/angular.js"></script>
	</head>
	<body data-ng-controller="SomeController">

	<button data-ng-click="clickUnfocused()">Not Focused</button>
	<button data-ng-click="clickFocused()" ngbk-focus>I'm very Focused!</button>
	<div>{{message.text}}</div>

	<script type="text/javascript">
	var myModule = angular.module( 'app', [] )
	.directive( 'ngbkFocus', function ()
	{
	return {
	link: function ( scope, element, attrs, controller )
	{
	element[0].focus();
	}
	}
	} )
	.controller( 'SomeController', function ( $scope )
	{
	$scope.message = {text: 'Nothing clicked'};

	$scope.clickUnfocused = function ()
	{
	$scope.message.text = 'Unfocused button clicked';
	}

	$scope.clickFocused = function ()
	{
	$scope.message.text = 'Focused button clicked';
	}
	} );

	</script>

	</body>
	</html>