将HTML内容添加到角度材质$ mdDialog

Question

我编写了以下代码来显示角度材料对话框中的一些内容。当我向textContent添加纯文本时，它工作正常。当我添加HTML时，它将HTML显示为文本。我如何将HTML绑定到textContent

这个作品

  <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')
      );      
  }

这不起作用

  <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')
      );
  }

提前致谢

Answer 1

你需要附加到模板，

 $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

使用模板而不是textContent，textContent用于模型中的show plan文本。它不呈现HTML代码

$mdDialog.show({
                controller: function ($scope) {
                    $scope.msg = msg ? msg : 'Loading...';
                },
                template: 'div class="test"><p>{{msg}}</p></div>',
                parent: angular.element(document.body),
                clickOutsideToClose: false,
                fullscreen: false
            });

Answer 3

您可以在模板中添加html，只需在displayOption中添加变量即可。这会奏效。

模板代码

<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>

控制器代码

$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');

                     });

Answer 4

您可以使用htmlContent而不是textContent来呈现HTML。下面是https://material.angularjs.org/latest/#mddialog-alert提供的文档的摘录

$ mdDialogPreset #htmlContent（string） - 将警报消息设置为HTML。需要加载ngSanitize模块。 HTML不是通过Angular的编译器运行的。

Answer 5

当你只需要注入一两件东西时，使用模板似乎有点反直觉。为了避免使用模板，你需要包含'ngSanitize'才能使用它。

angular.module('myApp',['ngMaterial', 'ngSanitize'])
.controller('btnTest',function($mdDialog,$scope){
  var someHTML = "<font>This is a test</font>";
    $scope.showConfirm = function(ev) {
      // Appending dialog to document.body to cover sidenav in docs app
      var confirm = $mdDialog.confirm()
        .title('Please confirm the following')
        .htmlContent(someHTML)
        .ariaLabel('Lucky day')
        .targetEvent(ev)
        .ok('Please do it!')
        .cancel('Sounds like a scam');
      //Switch between .htmlContent and .textContent. You will see htmlContent doesn't display dialogbox, textContent does.         
      $mdDialog.show(confirm).then(function() {
        $scope.status = 'Saving Data';
      }, 
      function() {
        $scope.status = 'You decided to keep your debt.';
      });
    };

})

注意注入的HTML：

var someHTML = "<font>This is a test</font>";

我找到了这个例子here。

Answer 6

最新版本的Angular Material Design API具有预定义功能，可将HTML内容添加到警报对话框中：

an $mdDialogPreset with the chainable configuration methods:

$mdDialogPreset#title(string) - Sets the alert title.
$mdDialogPreset#textContent(string) - Sets the alert message.
$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize module to be loaded. HTML is not run through Angular's compiler.
$mdDialogPreset#ok(string) - Sets the alert "Okay" button text.
$mdDialogPreset#theme(string) - Sets the theme of the alert dialog.
$mdDialogPreset#targetEvent(DOMClickEvent=) - A click's event object. When passed in as an option, the location of the click will be used as the starting point for the opening animation of the the dialog.

文档的链接：Angular MD API