web-dev-qa-db-ja.com

HTMLコンテンツをangular material $ mdDialogに追加する

angularマテリアルダイアログボックスにコンテンツを表示するために、次のコードを記述しました。プレーンテキストを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')
      );
  }

前もって感謝します

htmlangularjsmodal-dialogmaterial-designangular-material
6
Shareer

テンプレートに追加する必要があります、

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

[〜＃〜]デモ[〜＃〜]

5
Sajeetharan

テンプレートに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');

                     });
2
Ganesh

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
            });
2
byteC0de

1つまたは2つのものを挿入するだけでよい場合にテンプレートを使用するのは少し直感に反しているようです。テンプレートの使用を避けるには、テンプレートを機能させるために「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>";

私はこの例を見つけました ここ 。

0
Jason Hu

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

0
Anatoliy Aksenov

TextContentの代わりにhtmlContentを使用してHTMLをレンダリングできます。 https://material.angularjs.org/latest/#mddialog-alert で入手可能なドキュメントからの抜粋です。

$ mdDialogPreset＃htmlContent（string）-アラートメッセージをHTMLとして設定します。 ngSanitizeモジュールをロードする必要があります。 HTMLはAngularのコンパイラを介して実行されません。

0
Faisal Feroz