feat(alert): add templateUrl support

- Adds support for `templateUrl` to override template on an instance by
  instance basis
- Exposes controller to the view via `controllerAs`

Closes #4139

Author: wesleycho

src/alert/alert.js

@@ -7,11 +7,14 @@ angular.module('ui.bootstrap.alert', [])
 
 .directive('alert', function () {
   return {
-    restrict:'EA',
-    controller:'AlertController',
-    templateUrl:'template/alert/alert.html',
-    transclude:true,
-    replace:true,
+    restrict: 'EA',
+    controller: 'AlertController',
+    controllerAs: 'alert',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/alert/alert.html';
+    },
+    transclude: true,
+    replace: true,
     scope: {
       type: '@',
       close: '&'

src/alert/docs/readme.md

@@ -5,3 +5,5 @@ This directive can be used to generate alerts from the dynamic model data (using
 The presence of the `close` attribute determines if a close button is displayed.
 
 The optional `dismiss-on-timeout` attribute takes the number of milliseconds that specify timeout duration, after which the alert will be closed.
+
+The optional `template-url` attribute allows the user to override the default template with a custom template on an instance by instance basis

src/alert/test/alert.spec.js

@@ -1,14 +1,15 @@
 describe('alert', function () {
-  var scope, $compile;
+  var scope, $compile, $templateCache;
   var element;
 
   beforeEach(module('ui.bootstrap.alert'));
   beforeEach(module('template/alert/alert.html'));
 
-  beforeEach(inject(function ($rootScope, _$compile_) {
+  beforeEach(inject(function ($rootScope, _$compile_, _$templateCache_) {
 
     scope = $rootScope;
     $compile = _$compile_;
+    $templateCache = _$templateCache_;
 
     element = angular.element(
         '<div>' +
@@ -38,6 +39,30 @@ describe('alert', function () {
     return element.find('div[ng-transclude] span').eq(index);
   }
 
+  it('should expose the controller to the view', function () {
+    $templateCache.put('template/alert/alert.html', '<div>{{alert.text}}</div>');
+
+    element = $compile('<alert></alert>')(scope);
+    scope.$digest();
+
+    var ctrl = element.controller('alert');
+    expect(ctrl).toBeDefined();
+
+    ctrl.text = 'foo';
+    scope.$digest();
+
+    expect(element.html()).toBe('foo');
+  });
+
+  it('should support custom templates', function () {
+    $templateCache.put('foo/bar.html', '<div>baz</div>');
+
+    element = $compile('<alert template-url="foo/bar.html"></alert>')(scope);
+    scope.$digest();
+
+    expect(element.html()).toBe('baz');
+  });
+
   it('should generate alerts using ng-repeat', function () {
     var alerts = createAlerts();
     expect(alerts.length).toEqual(3);