Adding HTML content to angular material $mdDialog

Question

I have written the following piece of code to display some contents in angular material dialog box. it works fine when i add plain text to textContent . when i add HTML its displays HTML as text. how do i bind HTML to textContent

This Works

  <a href="#" ng-click="$scope.Modal()">Sample Link</a>

  $scope.Modal = function () {
      $mdDialog.show(
          $mdDialog.alert()
              .parent(angular.element(document.querySelector('body')))
              .clickOutsideToClose(true)
              .textContent('sample text')
              .ok('Ok')
      );      
  }

This Doesn't Works

  <a href="#" ng-click="$scope.Modal()">Sample Link</a>

  $scope.Modal = function () {
      $mdDialog.show(
          $mdDialog.alert()
              .parent(angular.element(document.querySelector('body')))
              .clickOutsideToClose(true)
              .textContent('<div class="test"><p>Sample text</p></div>')
              .ok('Ok')
      );
  }

Thanks in advance

Answer 1

You need to append to the template,

 $mdDialog.show({
      parent: angular.element(document.body),
      clickOutsideToClose: true,
      template: '<md-dialog md-theme="mytheme">' +
        '  <md-dialog-content>' +
        '<div class="test"><p>Sample text</p></div>' +
        '        <md-button ng-click="closeDialog();">Close</md-button>' +
        '  </md-dialog-content>' +
        '</md-dialog>',
      locals: {

      },
      controller: DialogController
    });

DEMO

Answer 2

You can add html in template and just add variable in displayOption. This will work.

Template Code

<script type="text/ng-template" id="confirm-dialog-answer.html">
<md-dialog aria-label="confirm-dialog">
    <form>
        <md-dialog-content>
            <div>
                <h2 class="md-title">{{displayOption.title}}</h2>
                <p>{{displayOption.content}} <img src="{{displayOption.fruitimg}}"/></p>
                <p>{{displayOption.comment}}</p>
            </div>
        </md-dialog-content>
        <div class="md-actions" layout="row">
            <a class="md-primary-color dialog-action-btn" ng-click="cancel()">
                {{displayOption.cancel}}
            </a>
            <a class="md-primary-color dialog-action-btn" ng-click="ok()">
                {{displayOption.ok}}
            </a>
        </div>
    </form>
</md-dialog>
</script>

Controller Code

$mdDialog.show({
                      controller: 'DialogController',
                      templateUrl: 'confirm-dialog-answer.html',
                      locals: {
                       displayOption: {
                        title: "OOPS !!",
                        content: "You have given correct answer. You earned "+$scope.lastattemptEarnCount,
                        comment : "Note:- "+$scope.comment,
                        fruitimg : "img/fruit/"+$scope.fruitname+".png",
                        ok: "Ok"
                       }
                      }
                     }).then(function () {
                        alert('Ok clicked');

                     });