fix(dialog): enable support for html content for alert and confirm di…

…alogs * dialog`::onShow( )` now uses `wrapSimpleContent( )` to wrap simple strings in `<p>` tags * dialog basic demo `showConfirm( )` uses HTML span tag to illustrate use of HMTL content * implemented generic `md-template` to safely inject HTML content into an element BREAKING CHANGE: dialog content text is now injected into **div.md-dialog-content-body** Before the template used was: ```html <md-dialog-content> <h2></h2> <p></p> </md-dialog-content> ``` Now uses: ```html <md-dialog-content> <h2></h2> <div class="md-dialog-content-body"> <p></p> </div> </md-dialog-content> ``` Fixes #1495. Closes #4148.
angular · Aug 14, 2015 · 07b4a12 · 07b4a12
1 parent d561c4d
commit 07b4a12
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 21 deletions.
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
@@ -435,7 +435,7 @@ function MdDialogProvider($$interimElementProvider) {
   }
 
   /* @ngInject */
-  function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement ) {
+  function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement) {
     return {
       hasBackdrop: true,
       isolateScope: true,
@@ -502,7 +502,7 @@ function MdDialogProvider($$interimElementProvider) {
        */
       function wrapSimpleContent() {
         if ( controller ) {
-          var HTML_END_TAG = /<\/\w*>/gm;
+          var HTML_END_TAG = /<\/[\w-]*>/gm;
           var content = controller.content;
 
           var hasHTML = HTML_END_TAG.test(content);

diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js
@@ -43,8 +43,8 @@ describe('$mdDialog', function() {
           .theme('some-theme')
           .ok('Next')
       ).then(function() {
-        resolved = true;
-      });
+          resolved = true;
+        });
 
       $rootScope.$apply();
       runAnimation();
@@ -168,33 +168,54 @@ describe('$mdDialog', function() {
       expect(rejected).toBe(true);
     }));
 
-   it('shows a basic confirm dialog with HTML content', inject(function($rootScope, $mdDialog, $animate) {
-         var parent = angular.element('<div>');
+    it('shows a basic confirm dialog with HTML content', inject(function($rootScope, $mdDialog, $animate) {
+      var parent = angular.element('<div>');
 
-         $mdDialog.show(
-           $mdDialog.confirm({
-             parent: parent,
-             ok : 'Next',
-             cancel : 'Back',
-             title : 'Which Way ',
-             content : '<div class="mine">Choose</div>'
-           })
-         );
+      $mdDialog.show(
+        $mdDialog.confirm({
+          parent: parent,
+          ok: 'Next',
+          cancel: 'Back',
+          title: 'Which Way ',
+          content: '<div class="mine">Choose</div>'
+        })
+      );
+
+      runAnimation();
 
-         runAnimation();
+      var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+      var content = angular.element(container[0].querySelector('.mine'));
 
-         var container = angular.element(parent[0].querySelector('.md-dialog-container'));
-         var content = angular.element(container[0].querySelector('.mine'));
+      expect(content.text()).toBe('Choose');
+    }));
 
-         expect(content.text()).toBe('Choose');
-       }));
+    it('shows a basic confirm dialog with HTML content using custom types', inject(function($rootScope, $mdDialog, $animate) {
+      var parent = angular.element('<div>');
+
+      $mdDialog.show(
+        $mdDialog.confirm({
+          parent: parent,
+          ok: 'Next',
+          cancel: 'Back',
+          title: 'Which Way ',
+          content: '<my-content class="mine">Choose</my-content>'
+        })
+      );
+
+      runAnimation();
+
+      var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+      var content = angular.element(container[0].querySelector('.mine'));
+
+      expect(content.text()).toBe('Choose');
+    }));
 
     it('should focus `md-button.dialog-close` on open', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
       jasmine.mockElementFocus(this);
 
       var parent = angular.element('<div>');
       $mdDialog.show({
-        template: ''+
+        template: '' +
         '<md-dialog>' +
         '  <div class="md-actions">' +
         '    <button class="dialog-close">Close</button>' +