将 HTML 内容添加到角度材料 $mdDialog答案

【问题标题】：Adding HTML content to angular material $mdDialog将 HTML 内容添加到角度材料 $mdDialog
【发布时间】：2016-11-17 04:37:53
【问题描述】：

我编写了以下代码来在角度材质对话框中显示一些内容。当我将纯文本添加到 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')
      );
  }

提前致谢

【问题讨论】：

标签： html angularjs modal-dialog material-design angular-material

【解决方案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

【讨论】：

【解决方案2】：

您可以在模板中添加 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');

                     });

【讨论】：

【解决方案3】：

使用模板代替 textContent，textContent 用于在模型中显示计划文本。它不呈现 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
            });

【讨论】：

【解决方案4】：

您可以使用 htmlContent 代替 textContent 来呈现 HTML。以下是来自https://material.angularjs.org/latest/#mddialog-alert的文档的摘录

$mdDialogPreset#htmlContent(string) - 将警报消息设置为 HTML。需要加载 ngSanitize 模块。 HTML 未运行 Angular 的编译器。

【讨论】：

【解决方案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。

【讨论】：

【解决方案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

【讨论】：