ionic side menu logo in header

Use below code in main template html file.

<ion-side-menus expose-aside-when="large" enable-menu-with-back-views="true">
        <ion-pane ion-side-menu-content>
        </ion-pane>
      <ion-side-menu side="left">
            <header class="bar bar-header bar-positive">
                <div>
                      <img class="margin-top:4px; float:left" src="images/logo.png"/>
                </div>
            </header>
            <ion-content class="has-header">
           </ion-content>
        </ion-side-menu>
</ion-side-menus>

and don't forget to write attribute "has-header" in your child templates files like:

<ion-view class="bubble-background" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon " ></button>
      </ion-nav-buttons>
    <ion-content class="has-header has-footer">
     </ion-content>
</ion-view>

ionic footer bar

<ion-footer-bar class="bottom-banner bar-positive">
            <h1 class="title">
                   This is the footer of ionic app
            </h1>
</ion-footer-bar>


In the side menu template above code should be use like:

<ion-side-menus expose-aside-when="large" enable-menu-with-back-views="true">
        <ion-pane ion-side-menu-content>
            <ion-nav-bar class="bar-positive nav-title-slide-ios7">
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" toggle="left"></button>
                </ion-nav-buttons>
   
                <ion-nav-back-button class="button-clear">
                    <i class="icon ion-chevron-left"></i>
                </ion-nav-back-button>
   
            </ion-nav-bar>
            <ion-nav-view name="main" animation="slide-left-right">
           </ion-nav-view>
            <ion-footer-bar class="bottom-banner bar-positive">
                <h1 class="title">
                      This is the footer of ionic app
                </h1>
            </ion-footer-bar>
        </ion-pane>

       <ion-side-menu side="left">
            <header class="bar bar-header bar-positive">
             </header>
            <ion-content class="has-header">
       </ion-content>
        </ion-side-menu>
       
    </ion-side-menus>


And don't forget to user attribute "has-footer" in your child templates/views like:

<ion-content class="has-header has-footer">
</ion-content>

angularjs controller in directive

app.directive('customButton', function() {
  return {
    restrict: 'A',
    scope: true,
    template: '<button ng-click="clickMe()" type="button">Click Me</button>',
    replace: true,
    controller: function($scope, $element) {
      $scope.clickMe = function() {
         alert("yes Its working"); 
      }
    }
  }
});

Use this directive in html page like:

<span custom-button></span>

So above span will be replaced by html value used in template attribute of directive. And you will see a button labeled "Click Me".

When  you clicked on that button you should see a alert.

angularjs directive hide element

Create a directive in app.js like below code:


app.directive('hideElement', function() {
     return function(scope, element, attrs) {
           element.hide();
     }
});


and use in your html page like

<a href="/#employees" hide-element>Employees</a>

You can also inject any service in this directive like:

app.directive('hideElement', function(EmployeeService) {
     return function(scope, element, attrs) {
         // Get data using employee service
         // and hide element according to any condition

           element.hide();
     }
});

AngularJS get attribute value in directive

<a check-permission permissioncode="BILLING_MANAGE">Billing</a>


In above line directive name is check-permission and we want value of attribute permissioncode in directive.

Using below code we can get the value of attribute permissioncode:

app.directive('

checkPermission', function() {
    return function(scope, element, attrs) {
        attrs.$observe('permissioncode', function(permission) {
              alert(permission)

        });
    }
});