Instantly share code, notes, and snippets.

What would you like to do?
Diretiva para controlar o acesso a elementos html
.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>');
<!DOCTYPE html>
<html ng-app="acesso">
<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">
.block {
margin-left: 5px;
color: red;
a[disabled] {
pointer-events: none;
td {
padding: 5px
<h1>AngularJS: Diretiva de acesso</h1>
<td>Com Restrição</td>
<button permissao-acesso="block" onclick="alert('Ops, deu errado!')">Botão</button>
<a href="" permissao-acesso="block" onclick="alert('Ops, deu errado!')">Link</a>
<td>Sem Restrição</td>
<button permissao-acesso="no-block" onclick="alert('Aeee \\o/, botão liberado!')">Botão</button>
<a href="" permissao-acesso="no-block" onclick="alert('Aeee \\o/, link liberado!')">Link</a>
<a href=""> Blog do Gabriel Feitosa</a>
<script src=""></script>
<script src="js/app.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment