Skip to content

Instantly share code, notes, and snippets.

@gabrielfeitosa

gabrielfeitosa/app.js

Last active May 19, 2016 15:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gabrielfeitosa/0f3586926b9db42d2f3daee4d616b4a4 to your computer and use it in GitHub Desktop.
Save gabrielfeitosa/0f3586926b9db42d2f3daee4d616b4a4 to your computer and use it in GitHub Desktop.
Download ZIP
Diretiva para controlar o acesso a elementos html
Raw
app.js
(function(){
angular.module('acesso',[])
.directive('permissaoAcesso', function(){
return {
restrict: 'A',
link: function ($scope, element, attrs) {
if (attrs.permissaoAcesso === 'block') {
element.attr('disabled', 'disabled');
element.append('<span class="block fa fa-lock"></span>');
}
}
};
});
})();
Raw
index.html
<!DOCTYPE html>
<html ng-app="acesso">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<title>Blog do Gabriel Feitosa</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<style>
.block {
margin-left: 5px;
color: red;
}
a[disabled] {
pointer-events: none;
}
td {
padding: 5px
}
</style>
</head>
<body>
<h1>AngularJS: Diretiva de acesso</h1>
<table>
<th>
<tr>
<td></td>
<td>Botão</td>
<td>Link</td>
</tr>
</th>
<tr>
<td>Com Restrição</td>
<td>
<button permissao-acesso="block" onclick="alert('Ops, deu errado!')">Botão</button>
</td>
<td>
<a href="" permissao-acesso="block" onclick="alert('Ops, deu errado!')">Link</a>
</td>
</tr>
<tr>
<td>Sem Restrição</td>
<td>
<button permissao-acesso="no-block" onclick="alert('Aeee \\o/, botão liberado!')">Botão</button>
</td>
<td>
<a href="" permissao-acesso="no-block" onclick="alert('Aeee \\o/, link liberado!')">Link</a>
</td>
</tr>
</table>
<footer>
<hr/>
<a href="http://gabrielfeitosa.com"> Blog do Gabriel Feitosa</a>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment