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

当您只需要注入一两件东西时，使用模板似乎有点反直觉。为了避免使用模板，您需要包含＆＃39; ngSanitize＆＃39;它的工作原理。

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

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

6 个答案: