Pierre Joubert pierrejoubert73

Often times the choice between both directives seems trivial, because you can achieve the same effect either way. However both have interesting default behaviours that you can use to you advantage.

ng-show will hide the element it is on by default, unless the condition in it evaluates to true.
ng-hide will show the element it is on by default, unless the condition in it evaluates to true.

This is most useful when your controller is doing AJAX calls or something else that's asynchronous. Your variables may still be undefined until the AJAX call returns.

Example

foo.controller.js

$ctrl.foos;

	// In this file we use a data URL to represent a Blob. This basically base64
	// encodes the Blob and puts that string in a URL. This has better compatibility
	// with old browsers, but is limited to ~2MB.

	const blob = getBlobFromSomewhere()

	const reader = new FileReader()
	reader.onload = function (event) {
	const a = document.createElement('a')
	a.href = event.target.result

	var app = angular.module('app', [])

	app.component('selectPicker', {
	template: '<div ng-transclude ng-show="$ctrl.show"></div>',
	require: {
	ngModel: '^ngModel'
	},
	bindings: {
	options: '<',
	disable: '<'

	<?php
	class User
	{
	public function save()
	{
	$username = $this->input->post('name');
	$userData = json_decode($this->input->post('data'));

	$doStuff($username, $userData);
	}

	angular.module('uploadFile', []).service('uploadService', ['$http', function ($http) {
	this.uploadFile = function () {
	var field = document.createElement('input')
	field.setAttribute('type', 'file')
	field.setAttribute('accept', '.json, application/json')

	field.onchange = function () {
	var data = new FormData()
	data.append('connectionId', 'banana')
	data.append('fileToImport', field.files[0])

	-- show running queries (pre 9.2)
	SELECT procpid, age(clock_timestamp(), query_start), usename, current_query
	FROM pg_stat_activity
	WHERE current_query != '<IDLE>' AND current_query NOT ILIKE '%pg_stat_activity%'
	ORDER BY query_start desc;

	-- show running queries (9.2)
	SELECT pid, age(clock_timestamp(), query_start), usename, query
	FROM pg_stat_activity
	WHERE query != '<IDLE>' AND query NOT ILIKE '%pg_stat_activity%'

	function arrayCopy(to, from) {
	Array.prototype.push.apply(to, from);
	}