Inserindo elemento condicionalmente no angularjs (ng-if)

Temos nativo no angularjs o ng-show e ng-hide, que é utilizado para mostrar ou esconder um elemento no dom. O que ele faz é utilizar a propriedade css “display:none” para esconder o elemento, mas o ele ainda continuará no dom.

Em algumas cituações pode ser conveniente remover completamente o elemento do dom caso uma certa condição não seja satisfeita. Para isto criamos uma directive.

angular.module('app',[])
.directive('ngIf', function() {
	return {
		link: function(scope, element, attrs) {
			if(scope.$eval(attrs.ngIf)) {
				 // remove '<div ng-if...></div>'
				 element.replaceWith(element.children())
			 } else {
				 element.replaceWith(' ')
			 }
		 }
	 }
});

E no html você escreverá algo do tipo:

<div ng-if="condition">
	<p>If condition === true show-me, else take-me dow from dom</p>
</div>

Veja isto na prática acessando http://jsfiddle.net/csbenjamin/mvcEQ/7/

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados:

jQuery like Angular.js directive Angular.js 1.4 – Como adicionar uma directive dentro de outra directive Evitando uso de variáveis globais em sistemas utilizando AngularJs Adicionar smartTable.table no sistema Observando alterações interna no valor de um array utilizando AngularJS Obter o nome da tag de um elemento HTML utilizando jQuery Acessar o scope de um elemento externamente a seu controller em AngularJS Remover e adicionar atributos HTML condicionalmente no Vue.js Fundamentos do Angularjs