Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS Custom Directive Example
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment