feat(alert): remove replace: true usage

- Remove `replace: true` usage

BREAKING CHANGE: This removes the `replace: true` usage, so this has an effect on how one uses the directive in the template - see documentation for reference

Closes #5986

Author: wesleycho

src/alert/alert.js

@@ -1,7 +1,12 @@
 angular.module('ui.bootstrap.alert', [])
 
-.controller('UibAlertController', ['$scope', '$attrs', '$interpolate', '$timeout', function($scope, $attrs, $interpolate, $timeout) {
+.controller('UibAlertController', ['$scope', '$element', '$attrs', '$interpolate', '$timeout', function($scope, $element, $attrs, $interpolate, $timeout) {
   $scope.closeable = !!$attrs.close;
+  $element.addClass('alert');
+  $attrs.$set('role', 'alert');
+  if ($scope.closeable) {
+    $element.addClass('alert-dismissible');
+  }
 
   var dismissOnTimeout = angular.isDefined($attrs.dismissOnTimeout) ?
     $interpolate($attrs.dismissOnTimeout)($scope.$parent) : null;
@@ -17,13 +22,12 @@ angular.module('ui.bootstrap.alert', [])
   return {
     controller: 'UibAlertController',
     controllerAs: 'alert',
+    restrict: 'A',
     templateUrl: function(element, attrs) {
       return attrs.templateUrl || 'uib/template/alert/alert.html';
     },
     transclude: true,
-    replace: true,
     scope: {
-      type: '@',
       close: '&'
     }
   };

src/alert/docs/demo.html

@@ -1,11 +1,9 @@
 <div ng-controller="AlertDemoCtrl">
   <script type="text/ng-template" id="alert.html">
-    <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
-      <div ng-transclude></div>
-    </div>
+    <div ng-transclude></div>
   </script>
 
-  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
-  <uib-alert template-url="alert.html">A happy alert!</uib-alert>
+  <div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
+  <div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
   <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
 </div>

src/alert/docs/readme.md

@@ -5,15 +5,11 @@ This directive can be used both to generate alerts from static and dynamic model
 * `close()`
   <small class="badge">$</small> -
   A callback function that gets fired when an `alert` is closed. If the attribute exists, a close button is displayed as well.
-  
+
 * `dismiss-on-timeout`
   _(Default: `none`)_ -
   Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the `close` attribute.
-  
+
 * `template-url`
   _(Default: `uib/template/alert/alert.html`)_ -
   Add the ability to override the template used in the component.
-  
-* `type`
-  _(Default: `warning`)_ -
-  Defines the type of the alert. Go to [bootstrap page](http://getbootstrap.com/components/#alerts) to see the type of alerts available.

src/alert/test/alert.spec.js

@@ -12,9 +12,10 @@ describe('uib-alert', function() {
 
     element = angular.element(
       '<div>' +
-        '<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}"' +
+        '<div uib-alert ng-repeat="alert in alerts" ' +
+          'ng-class="\'alert-\' + (alert.type || \'warning\')" ' +
           'close="removeAlert($index)">{{alert.msg}}' +
-        '</uib-alert>' +
+        '</div>' +
       '</div>');
 
     scope.alerts = [
@@ -41,7 +42,7 @@ describe('uib-alert', function() {
   it('should expose the controller to the view', function() {
     $templateCache.put('uib/template/alert/alert.html', '<div>{{alert.text}}</div>');
 
-    element = $compile('<uib-alert></uib-alert>')(scope);
+    element = $compile('<div uib-alert></div>')(scope);
     scope.$digest();
 
     var ctrl = element.controller('uib-alert');
@@ -50,40 +51,23 @@ describe('uib-alert', function() {
     ctrl.text = 'foo';
     scope.$digest();
 
-    expect(element.html()).toBe('foo');
+    expect(element.html()).toBe('<div class="ng-binding">foo</div>');
   });
 
   it('should support custom templates', function() {
     $templateCache.put('foo/bar.html', '<div>baz</div>');
 
-    element = $compile('<uib-alert template-url="foo/bar.html"></uib-alert>')(scope);
+    element = $compile('<div uib-alert template-url="foo/bar.html"></div>')(scope);
     scope.$digest();
 
-    expect(element.html()).toBe('baz');
+    expect(element.html()).toBe('<div>baz</div>');
   });
 
   it('should generate alerts using ng-repeat', function() {
     var alerts = createAlerts();
     expect(alerts.length).toEqual(3);
   });
 
-  it('should use correct classes for different alert types', function() {
-    var alerts = createAlerts();
-    expect(alerts.eq(0)).toHaveClass('alert-success');
-    expect(alerts.eq(1)).toHaveClass('alert-error');
-    expect(alerts.eq(2)).toHaveClass('alert-warning');
-  });
-
-  it('should respect alert type binding', function() {
-    var alerts = createAlerts();
-    expect(alerts.eq(0)).toHaveClass('alert-success');
-
-    scope.alerts[0].type = 'error';
-    scope.$digest();
-
-    expect(alerts.eq(0)).toHaveClass('alert-error');
-  });
-
   it('should show the alert content', function() {
     var alerts = createAlerts();
 
@@ -115,22 +99,15 @@ describe('uib-alert', function() {
   });
 
   it('should not show close button and have the dismissible class if no close callback specified', function() {
-    element = $compile('<uib-alert>No close</uib-alert>')(scope);
+    element = $compile('<div uib-alert>No close</div>')(scope);
     scope.$digest();
     expect(findCloseButton(0)).toBeHidden();
     expect(element).not.toHaveClass('alert-dismissible');
   });
 
-  it('should be possible to add additional classes for alert', function() {
-    var element = $compile('<uib-alert class="alert-block" type="info">Default alert!</uib-alert>')(scope);
-    scope.$digest();
-    expect(element).toHaveClass('alert-block');
-    expect(element).toHaveClass('alert-info');
-  });
-
   it('should close automatically if dismiss-on-timeout is defined on the element', function() {
     scope.removeAlert = jasmine.createSpy();
-    $compile('<uib-alert close="removeAlert()" dismiss-on-timeout="500">Default alert!</uib-alert>')(scope);
+    $compile('<div uib-alert close="removeAlert()" dismiss-on-timeout="500">Default alert!</div>')(scope);
     scope.$digest();
 
     $timeout.flush();
@@ -140,7 +117,7 @@ describe('uib-alert', function() {
   it('should not close immediately with a dynamic dismiss-on-timeout', function() {
     scope.removeAlert = jasmine.createSpy();
     scope.dismissTime = 500;
-    $compile('<uib-alert close="removeAlert()" dismiss-on-timeout="{{dismissTime}}">Default alert!</uib-alert>')(scope);
+    $compile('<div uib-alert close="removeAlert()" dismiss-on-timeout="{{dismissTime}}">Default alert!</div>')(scope);
     scope.$digest();
 
     $timeout.flush(100);

template/alert/alert.html

@@ -1,7 +1,5 @@
-<div class="alert" ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissible' : null]" role="alert">
-    <button ng-show="closeable" type="button" class="close" ng-click="close({$event: $event})">
-        <span aria-hidden="true">&times;</span>
-        <span class="sr-only">Close</span>
-    </button>
-    <div ng-transclude></div>
-</div>
+<button ng-show="closeable" type="button" class="close" ng-click="close({$event: $event})">
+  <span aria-hidden="true">&times;</span>
+  <span class="sr-only">Close</span>
+</button>
+<div ng-transclude></div>