directive for common wizard buttons angularjs

Posted: June 10, 2015 in web

template

<div class="iei-wizard-buttons clearfix">        
    <a ng-if="isBackShow" ui-sref="{{backState}}" ng-click="backClick()" class="btn btn-default btn-lg">{{backText}}</a>
    <a ng-if="isCancelShow" ui-sref="{{cancelState}}" ng-click="cancelClick()" class="btn btn-default btn-lg">{{cancelText}}</a>
    <a ng-if="isNextShow" ui-sref="{{nextState}}" ng-click="nextClick()" class="btn btn-warning btn-lg">{{nextText}}</a>
</div>

directive

.directive('wizardButtons', function () {
            return {
                restrict: 'E',
                scope: {
                    backText: '@',
                    cancelText: '@',
                    nextText: '@',
                    backClick: '&',
                    cancelClick: '&',
                    nextClick: '&',
                    backState: '@',
                    cancelState: '@',
                    nextState: '@'
                },
                link: function (scope,el,attrs) {
                    scope.isBackShow = JSON.parse(attrs.backShow || true);
                    scope.isCancelShow = JSON.parse(attrs.cancelShow || true);
                    scope.isNextShow = JSON.parse(attrs.nextShow || true);
                    
                    scope.backText = scope.backText || 'BACK';
                    scope.cancelText = scope.cancelText || 'CANCEL';
                    scope.nextText = scope.nextText || 'NEXT';

                    scope.backState = scope.backState || '.';
                    scope.cancelState = scope.cancelState || '.';
                    scope.nextState = scope.nextState || '.';                    
                    
                },
                templateUrl: 'views/directive/wizardButtons.html'
            };
        })

html

<wizard-buttons 
        back-state="enroll.rates"
        cancel-state="account"
        next-state="enroll.confirm"
        next-click="enrollRate(selectedRate)">
    </wizard-buttons>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s