Extending Ionic Templates


#1

Many Ionic components are based on templates that are pre-defined. For example, the $ionicPopup is defined as :

var POPUP_TPL =
'<div class="popup-container">' +
'<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="popup-buttons" ng-show="buttons.length">' +
'<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>' +
'</div>';

Unfortunately, this makes it pretty difficult to customize Ionic components. For example, I might need a button in the Popup head.

Is there anyway to create a customize Popup that extends all the functionality of the existing popup? I COULD just create an entire clone of $ionicPopup and call is $customPopupWithHeaderButtons, but that seems less than DRY.

Ideas anyone?