myNavigator is not defined

mentizm

Hi me again,

im using the USAGE of the ons-navigator (https://onsen.io/reference/ons-navigator.html).

By click on the “Push Page” button the page throws an error: myNavigator is not defined.

i included this js files:
<script src=“lib/onsenui/js/angular/angular.js”></script>
<script src=“lib/onsenui/js/onsenui.js”></script>

can someone help me. did i make a mistake.

Thanks mentizm

argelius

Hi @mentizm !

You need to use the var attribute of the <ons-navigator> like this:

<ons-navigator var="myNavigator">
  ...
</ons-navigator>

By doing this, it is bound as a variable and you can access it with $scope.myNavigator in AngularJS.

Here is a simple example on Codepen that illustrates this:
http://codepen.io/onsen/pen/yrhtv

In the case you are using the Onsen UI 2.0 beta, you also need to include onsenui-angular.js since we’ve split the AngularJS bindings to a separate file.

Also, if you are not using AngularJS, the var attribute does not work. Instead you can just select the element and push the page:

<ons-navigator id="my-navigator"></ons-navigator>

var navigator = document.getElementById('my-navigator')
navigator.pushPage('page.html');