Angular Hyperlink directive

Here’s a simple example how to create your own hyperlink directive, demonstrating changing the DOM with directives.

Usage:

Directive:

	.directive('hyperlink', function(){
	return {
	transclude: true,
	replace: true,
	template: '<a ng-transclude></a>',
	}
	})

view raw simple hyperlink directive hosted with ❤ by GitHub

DOM:

Here's another example this time using an explicit call of the transclude function:

	.directive('hyperlink', function(){
	return {
	restrict: 'E',
	transclude: true,
	link: function (scope, element, attrs, ctrl, transclude) {
	transclude(scope, function (clone) {
	var anchorTag = angular.element("<a href='" + attrs.ngHref + "'></a>");
	anchorTag.append(clone);
	element.append(anchorTag);
	});
	}
	}
	})

view raw hyperlink directive hosted with ❤ by GitHub

DOM:

Here I’ve kept the hyperlink element in the DOM as this is considered a best practise by the Angular team since v1.3.