2016-08-09 65 views
0

我有即時呈現有事時,這是它的代碼的對話框:如何將圖標添加到ng2-material對話框?

public showMessageDialog(message) { 
    let config = new MdDialogConfig() 
     .title('Dialog Box:') 
     .textContent(message) 
     .ok('Got it') .; 

    this.dialog.open(MdDialogBasic, this.element, config); 
    } 

現在我有一些表情符號圖標我想觸發框時要添加到它。

所以從這個:

enter image description here

這樣:

enter image description here

回答

0

編輯:這對角材料1,但這個概念應該是AM2相同。

你將不得不使用自定義對話框來實現這一目標 - CodePen

標記

<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp"> 
    <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center"> 
    <md-button class="md-primary md-raised" ng-click="showAdvanced($event)"> 
     Custom Dialog 
    </md-button> 

    <script type="text/ng-template" id="dialog1.tmpl.html"><md-dialog aria-label="Mango (Fruit)" ng-cloak> 
     <md-dialog> 
      <form> 
      <md-dialog-content> 
       <div class="md-dialog-content"> 
       <p class="md-title"> Dialog Box: </p> 
       <div> 
       <p> Some message </p> 
       <img style="width:100px" src="..."> 
       </div> 
       </div> 
      </md-dialog-content> 

      <md-dialog-actions layout="row"> 
       <span flex></span> 
       <md-button class="md-primary" ng-click="answer('Got it')"> 
       Got it 
       </md-button> 
      </md-dialog-actions> 
      </form> 
     </md-dialog> 
    </script> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) { 
    $scope.status = ' '; 
    $scope.customFullscreen = false; 

    $scope.showAdvanced = function(ev) { 
    var useFullScreen = false; 

    $mdDialog.show({ 
     controller: DialogController, 
     templateUrl: 'dialog1.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     clickOutsideToClose:true, 
     fullscreen: useFullScreen 
    }) 
    .then(function(answer) { 
     $scope.status = answer; 
    }, function() { 
     $scope.status = 'You cancelled the dialog.'; 
    }); 
    }; 

}); 

function DialogController($scope, $mdDialog) { 
    $scope.hide = function() { 
    $mdDialog.hide(); 
    }; 

    $scope.cancel = function() { 
    $mdDialog.cancel(); 
    }; 

    $scope.answer = function(answer) { 
    $mdDialog.hide(answer); 
    }; 
} 
相關問題