將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

您需要一個PPEND到模板，

$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用於在模型顯示計劃文本。它不呈現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。