如何在离线框架中的$ cordovaActionSheet插件buttonLabel中显示图标？

Question

我正在尝试在$cordovaActionSheet plugin的buttonLabels中添加图标，但它无效。我试过了

var options = {
            title: 'Share',
            buttonLabels: ['<i class="ion-social-facebook"></i> Share via Facebook', '<i class="ion-social-twitter"></i> Share via Twitter'],
        };

但它按原样打印标签。如何在按钮标签中显示图标？

Answer 1

我发现你也标记了ionic-framework。如果您使用Ionic，则可以使用$ionicActionSheet代替$cordovaActionSheet。请参阅this doc。

使用$ionicActionSheet添加图片没问题：

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {

 // Triggered on a button click, or some other target
 $scope.show = function() {

   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<i class="ion-social-facebook"></i> Share via Facebook' },
       { text: '<b>Share</b> This' },
       { text: 'Move' }
     ],
     destructiveText: 'Delete',
     titleText: 'Modify your album',
     cancelText: 'Cancel',
     cancel: function() {
      // add cancel code..
    },
     buttonClicked: function(index) {
       return true;
     }
   });

   // For example's sake, hide the sheet after two seconds
   $timeout(function() {
     hideSheet();
   }, 2000);

 };
});