CODEWITHSUNDEEP
angularjsangularjs-directiveionic-framework
Steve
Steve

Reputation: 5166

How to include an Ionic Directive?

I would like to use http://ionicframework.com/docs/api/directive/ionNavButtons/ as a way of adjusting what's shown in the header/nav bar based on the route where the elements shown in the header are set in the view.

 <!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar>
</ion-nav-bar>

<!-- where the initial view template will be rendered -->
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        I'm a button on the left of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

However when I try to use that code, the directive is undefined. It must separate from the ionic.js, which I'm including in the page. Is there a special way to add it as a directive or just copy the code from github (https://raw.githubusercontent.com/driftyco/ionic/master/js/angular/directive/navBar.js)? When I just include the directive, I get IonicModule is undefined in the console.

Upvotes: 1

Views: 1531

Answers (1)

Jesus is Lord
Jesus is Lord

Reputation: 15409

Well you'll need your main app module depending on the 'ionic' module. (i.e. in your index.html somewhere you have ng-app="myApp" - and then in a script somewhere you have angular.module('myApp', [/* dependencies */]); - you need to add 'ionic' to the dependencies.) Have you done this?

Also I'd just find a minified/complete version of the ionic files for javascript and angular; however if you just wanted that single directive, you minimally will need this, too, as that is where the IonicModule is defined. It looks like from your error message you haven't done this.

https://github.com/driftyco/ionic/blob/master/js/angular/main.js

If you can set up a plunker that will help (me help) even more.

Upvotes: 0

Related Questions