Attribute template-url to customize the HTML

bower.json

@@ -9,7 +9,10 @@
 		"url": "https://github.com/marcorinck/angular-growl"
 	},
 	"license": "MIT",
-	"main": "./build/angular-growl.js",
+	"main": [
+		"./build/angular-growl.js",
+		"./build/angular-growl.min.css"
+	],
 	"ignore": [
 		"src",
 		"test",

build/angular-growl.js

@@ -1,18 +1,27 @@
 /**
- * angular-growl - v0.4.0 - 2013-11-19
+ * angular-growl - v0.4.0 - 2015-04-04
  * https://github.com/marcorinck/angular-growl
- * Copyright (c) 2013 Marco Rinck; Licensed MIT
+ * Copyright (c) 2015 Marco Rinck; Licensed MIT
  */
 angular.module('angular-growl', []);
 angular.module('angular-growl').directive('growl', [
   '$rootScope',
-  function ($rootScope) {
+  '$compile',
+  function ($rootScope, $compile) {
     'use strict';
     return {
       restrict: 'A',
-      template: '<div class="growl">' + '\t<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' + '\t\t<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' + '       <div ng-switch="message.enableHtml">' + '           <div ng-switch-when="true" ng-bind-html="message.text"></div>' + '           <div ng-switch-default ng-bind="message.text"></div>' + '       </div>' + '\t</div>' + '</div>',
       replace: false,
       scope: true,
+      link: function ($scope, element, attrs) {
+        var template = '<div class="growl">' + '\t<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' + '\t\t<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' + '       <div ng-switch="message.enableHtml">' + '           <div ng-switch-when="true" ng-bind-html="message.text"></div>' + '           <div ng-switch-default ng-bind="message.text"></div>' + '       </div>' + '\t</div>' + '</div>';
+        if (attrs.templateUrl) {
+          $scope.templateUrl = attrs.templateUrl;
+          template = '<div><ng-include src="templateUrl"/></div>';
+        }
+        element.html(template);
+        $compile(element.contents())($scope);
+      },
       controller: [
         '$scope',
         '$timeout',

demo/custom.html

@@ -0,0 +1,9 @@
+<div class="growl">
+   <div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">
+       <button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>
+       <div ng-switch="message.enableHtml">
+           <div ng-switch-when="true" ng-bind-html="message.text"></div>
+           <div ng-switch-default ng-bind="message.text"></div>
+       </div>
+   </div>
+</div>

demo/demo.html

@@ -23,7 +23,7 @@
 <div ng-controller="demoCtrl">
     <div class="text-center container"><h1>angular-growl Demo site</h1></div>
 
-    <div growl></div>
+    <div growl template-url="custom.html"></div>
     <div class="container">
         <div class="well row">
             <label>

demo/demo.js

@@ -7,8 +7,6 @@ app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvi
 	growlProvider.messageSeverityKey("severity-level");
 	growlProvider.onlyUniqueMessages(true);
 	$httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
-
-
 }]);
 
 app.run(function($httpBackend) {
@@ -21,6 +19,7 @@ app.run(function($httpBackend) {
 			{"messagetext":"and another", "severity-level": "error"}
 		]
 	});
+	$httpBackend.whenGET('custom.html').passThrough();
 });
 
 app.controller("demoCtrl",  function demoCtrl($scope, growl, $http) {

src/growlDirective.js

@@ -1,19 +1,29 @@
-angular.module("angular-growl").directive("growl", ["$rootScope", function ($rootScope) {
+angular.module("angular-growl").directive("growl", ["$rootScope", "$compile", function ($rootScope, $compile) {
 	"use strict";
 
 	return {
 		restrict: 'A',
-		template:   '<div class="growl">' +
-					'	<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
-					'		<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' +
-					'       <div ng-switch="message.enableHtml">' +
-					'           <div ng-switch-when="true" ng-bind-html="message.text"></div>' +
-					'           <div ng-switch-default ng-bind="message.text"></div>' +
-					'       </div>' +
-					'	</div>' +
-					'</div>',
 		replace: false,
 		scope: true,
+		link: function($scope, element, attrs){
+			var template = '<div class="growl">' +
+							'	<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
+							'		<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' +
+							'       <div ng-switch="message.enableHtml">' +
+							'           <div ng-switch-when="true" ng-bind-html="message.text"></div>' +
+							'           <div ng-switch-default ng-bind="message.text"></div>' +
+							'       </div>' +
+							'	</div>' +
+							'</div>';
+
+			if(attrs.templateUrl){
+				$scope.templateUrl = attrs.templateUrl;
+				template = '<div><ng-include src="templateUrl"/></div>';
+			}
+
+			element.html(template);
+			$compile(element.contents())($scope);
+		},
 		controller: ['$scope', '$timeout', 'growl', function ($scope, $timeout, growl) {
 			var onlyUnique = growl.onlyUnique();