Customizing dynamically added buttons in popups

tutorials
1

I was integrating social share feature in one of my apps and was aiming for something like this for the UI

Basically it is a popup, with options (as buttons) for different ways to share some content.

Here is the code for the popup:

$scope.sharePopup = function(){
  $ionicPopup.show({
    title: 'Share Via',
     buttons: [
      		    { 
      			text: 'Share on Facebook',
      			type: 'button-block icon-left ion-social-facebook button-facebook', 
      			onTap: function(e){ 	
      			   window.plugins.socialsharing.shareViaFacebook(
                               'My share message', 
			        null /* img */,
                                null /* url */,
                                function() {
                                  //OnSuccess
                                },
                                function(errormsg){
                                 //OnFail
                                }
			   ); 
      			}
      		    }
      		]
	});
}

Now you have to tweak around the ionic.js file. But it is simple.

var POPUP_TPL =
  '<div class="popup">' +
    '<div class="popup-head">' +
      '<h3 class="popup-title" ng-bind-html="title"></h3>' +
      '<h5 class="popup-sub-title" ng-bind-html="subTitle" ng-if="subTitle"></h5>' +
    '</div>' +
    '<div class="popup-body">' +
    '</div>' +
    '<div class="padding">' +
      '<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>' +
    '</div>' +
  '</div>';

Exactly paste this for the POPUP_TPL variable.

I have replaced just class names that was not necessary, i.e

 '<div class="popup-buttons row">' +
      '<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button col" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>'