see this demo

http://onsenui.io/OnsenUI/demo/navigator_with_navigator_toolbar/

expected: The toolbar title should be displayed.
actual: The title is not displayed

Change bower package to depend on it's dependencies, not copy them in manually.

use more un ambiguous class for animation

When switch back to a navigator page inside the tabbar, it's page stack it cleared.
Add ability to save state.

Hi guys,

I don't want my app to automatically use the label of the previous page for the backbutton in the ons-navigator.

Can you please let us pass the labels to the navigator? I don't really mind about the one on the right, but a left-button-label would be very useful.

Thanks for all your efforts,
Eddy Verbruggen

Hi,

I might be just jumping too soon but demo doesn't work at all, looking at the source - there's a line in there that's pointing to lib/maccha/ folder but it doesn't exist somewhere.

https://github.com/OnsenUI/OnsenUI/blob/dev/framework/directives/navigator_factory.js?source=cc
NavigatorFactory is not factory but doing global navigator's task.
Would you like to rename NavigatorFactory to other name? (GlobalNavigatorService?, NavigatorStack?, OnsenNavigatorService?, ...)

ex.

<div ons-orientation="landscape">
    <!-- content to be displayed when in horizontal -->
</div>

<div ons-orientation="portrait">
    <!-- content to be displayed when in portrait -->
</div>

https://github.com/karlgoldstein/grunt-html2js

components:

screen, navigator, sliding-menu, split-view

• angular.jsに依存しているのに、Onsen UIのウェブサイトには全くそれに触れていない
  • angular.jsを知っているひとならわかるが、知らない人にとってはangular.jsに依存していることすら気が付かなくて詰むと思う
  • angular.jsへのリンクを置いておくか、angular.jsの入門記事を置かないとわからないと思う
• Referenceはよく書けているけど、ひとつの例しか書いていないので
  少し応用しようと思うとangular.jsのドキュメントをあさったりしないとわからないので詰む

Currently, the width of sliding-menu is by default 90% of the screen. While it looks fine in portrait mode, if the device is in landscape, the menu will look too big when opened.

I added support to maxWidth by making the following changes to the directives.directive('onsSlidingMenu' ... :

Add a maxWidth property to the scope:

scope: {
    behindPage: '@',
    abovePage: '@',
    maxWidth: '@'
},

In the init function, locate the line with this.MAX = this.abovePage.clientWidth * MAIN_PAGE_RATIO; and add this:

if (scope.maxWidth && this.MAX > parseInt(scope.maxWidth))
     this.MAX = parseInt(scope.maxWidth);

And now, one can do:

<ons-sliding-menu
        max-width="250"
        behind-page="menu.html"
        above-page="transactions.html">
</ons-sliding-menu>

provide option to enable/disable swipe interaction.

The following html:

    <ons-text-input
            disabled="false"
            placeholder="xxxx-xxxx-xxxx-xxxx">        
    </ons-text-input>

shows a disabled input, while the value of disabled is "false".
This is needed for example to data-bind a "loading" property:

    <ons-text-input
            disabled="{{isLoading}}"
            placeholder="xxxx-xxxx-xxxx-xxxx">        
    </ons-text-input>

• Referenceはよく書けていると思う
• ionicと比べるとパッと見ダサい。Referenceにおいてある例もパッと見ダサい
• まともなアプリの画面を作ろうとすると途端に苦労する
  • 例: リストビューで、左にサムネイルがあって、右に矢印のアイコンがあるなど
    ionicだとちゃんとそういう例があってありがたい
• iOSではフォントはHelvetica neueなのにOnsen UIのiOSテーマではフォントになぜかCode suns使っている
• カスタムエレメントになっているので中身がブラックボックスになっていてよくわからない。DOMがいじりづらい。
• ons-screenって何? 意味がわからない
• Referenceに載っているサンプルのコードがそのままだとサンプル通りにならない
• ionicだと、単にhtmlとcssを書くだけで導入できるので、かならずしもAngular.jsを使う必要がないので試しやすい

http://stackoverflow.com/questions/22239363/angularjs-applying-dynamic-function-on-button-that-called-it/22368336#22368336

framework/directives/if_platform.js : Line 49 needs two additional regex tests:

from:
if (navigator.userAgent.match(/BlackBerry/i)) {

to:
if ((navigator.userAgent.match(/BlackBerry/i)) || (navigator.userAgent.match(/RIM Tablet OS/)) || (navigator.userAgent.match(/BB10/i))) {

Your project root is "app" folder. Use your favorite IDE and start adding awesome feature to your app.

You may want to look at "demo" folder for sample codes.
Run the demo code by navigating your browser to:

http://localhost:8000/demo/index.html

change to

Your project root is "app" folder. Use your favorite IDE and start adding awesome feature to your app.

You may look at these resources:

Documentation

http://onsenui.io/docs/

Blog

http://blog.onsenui.io

eg. screen: "screen:ready"
navigator: "navigator:ready"

I have a simple ons-navigator that looks like this:

<ons-navigator
        left-button-icon="fa fa-bars"
        right-button-icon="fa fa-lg fa-plus"
        title="{{title}}"
        on-right-button-click="rightClick()"
        on-left-button-click="leftClick()"
        page="page1.html">
  </ons-navigator>

rightClick() is a call to:

 $scope.ons.navigator.pushPage('page2.html')

leftClick() does:

  console.log('I was clicked');

Both page1.html and page2.html do not have an ons-navigator-toolbar set - they are only empty ons-pages.

If I click the right-button to go to page1, rightClick() is called and page1 shows. But if then I click on the left-button, leftClick() is NOT called, and the default onsenui action is performed.

When creating an ons-navigator, one can do:

 <ons-navigator
            title="{{myTitle}}"
            on-left-button-click="leftClick()"
            page="page1.html">
    </ons-navigator>

title will be binded correctly to myTitle.
Now, imagine you create page2.html with:

     <ons-navigator-toolbar
              title="{{myTitle}}"
      </ons-navigator-toolbar>

Page2 will show {{myTitle}} in the title of the page instead of binding to myTitle.

This creates problems if, for example, you're using $translate for all your Strings.

eg.
ons.tabbar.setActiveTab(0)

will activate the first tab.

Developers must write ons-screen element in Onsen UI.
Writing ons-screen element is verbose for me.

Would you like to remove ons-screen and add global service like current NavigatorFactory for "ons.screen"?

pros

• Short code. Making a example code short.
• Developers can write ons-navigator direct.
• Developers can call ons.screen service method in anywhere.

cons

• Break backward compatibility.

Do you think about this suggetion?

How to add a searchbox in Navigation Bar ?

Hello,

the right-button-icon of an ons-navigator-toolbar is disappearing the second time you navigate to the same page, while using an ons-sliding-menu.
This issue only happens when testing on the mobile phone. Tested with both ios7 and Android 4.2, using Phonegap/Cordova. On Chrome, it works fine.

How to reproduce:

sliding_menu.html

<ons-sliding-menu 
    behind-page="menu.html"
    above-page="navigator1.html">
  </ons-sliding-menu>

navigator1.html

<ons-navigator
    left-button-icon="fa fa-bars"
    on-left-button-click="ons.slidingMenu.toggleMenu();"
    page="page1.html">  
</ons-navigator>

page1.html
------------------------------`

<ons-page class="center">
    <ons-navigator-toolbar title="Page1"  right-button-icon="fa fa-lg fa-angle-right"
                           on-right-button-click="ons.navigator.pushPage('page2.html')">
    </ons-navigator-toolbar>
</ons-page>

1- After running the App, confirm that the icon of the right-button appears.
2- Now open the menu, and click to navigate to page1.
3- Confirm that the icon disappeared.

This is a use case that happens in almost 100% of the apps, so it's affecting pretty most everyone.

全体的には作りやすく、アニメーションの動きがあるので見栄えも良くなりました。
また、コントローラ、サービスという形で組み込んでいくため、jQueryと比べると、
出来たコードはずっと見やすくなっていると思います。

ただ、以下の２点で複雑になってしまっているため、サンプルアプリとして適切
かどうか
は分かりません。最初の学習用としてはちょっと難しいのではないかと思います。

■サービスの利用
ons-navigatorの外側やons-navigator自体に、アプリのコントローラを設定しても、
ページ内部から読み出すことが出来なかったため、各ページごとに専用のコント
ローラを
作成し、各コントローラ間のデータのやり取りはサービスを作って共有する形式
にしました。

（以前のバージョンのonsenuiでは、ons-navigatorの外側にコントローラを設置
出来たよう
ですが、1.0では出来ませんでした）

　サービスを利用するため、angularjsの知識が必要になるので、angularjsの経
験のない開
発者に、開発のハードルは少しあがるかとおもいます。（ビジネスアプリを作成
する場合は、
おそらくサービスは必須になるので、これはこれで良いかも知れませんが）

■ナビゲータ上に配置するボタン
ons-navigator上にボタンを設置し、そのボタンでページ移動とともにコンテン
ツ処理（
メモ帳であれば、メモの保存）などを行いたい場合、基本的に現在のonsenuiで
は出来ま
せんでした。

ons-navigatorに、自前のコントローラをつけた場合、自前のコントローラのメ
ソッドと、
ons-navigator自体のメソッドのどちらか１つしか呼び出せないようです。

onsenuiのソースコードでは

var onRightButtonClickFunction = $parse(onRightButtonClick);
if (onRightButtonClick.indexOf('ons.navigator.') >= 0) {
onRightButtonClickFunction(scope);
} else {
onRightButtonClickFunction(scope.$parent);
}

のように記述されていたので、on-right-button-click属性が「ons.navigator」
から始まる
場合はナビゲータのメソッド、それ以外の場合は親コントローラ（自分でナビ
ゲータに設置した
コントローラ）のメソッドが呼ばれるようになっていると思います。

　このため、「自前のコントローラで処理をしたあとに、ナビゲータにページ移
動させる」と
いった複合処理を行いたい場合

$scope.addPage = function() {
for(var cs = $scope.$$childHead; cs; cs = cs.$$nextSibling) { // 全子供
スコープを取得。実際はnavigatorのスコープ１つしかない
var time = new Date().getTime();
$scope.dataService.selectedMemo = { id : time }; // 自前のスコープ内での処理
cs.ons.navigator.pushPage('edit.html' , { title :
$scope.dataService.formatDate( $scope.dataService.selectedMemo.id ) } );
// navigatorスコープ内での処理
}
};

のように、自前のコントローラのスコープから子供のスコープ（この場合、
navigatorにひもづいたonsenuiのスコープ)を取得して、 そのスコープ経由で動
作させることになり、冗長な感じになるかと思います。

　また、同様にナビゲータ上のボタンから、ons-page内のコントローラに影響を
与えたい場合は、

$scope.save = function() {
var sc = angular.element( document.querySelector( ".EditEntryCtrl" )
).scope();
sc.$apply( function() {
sc.save();
});
};
のような直接DOM操作によりスコープを取得しないと出来ないかと思います。

　アプリ開発の立場からいうと、自前のコントローラに専念したいので、
onsenuiで定義されているディレクティブのスコープは
　
onsenui.navigator();
とか
onsenui.element( 'navigator' );

などのような形式で（onsenuiというグローバルから）取得出来ると楽で良いか
なと思っています。
（単なる、angular.element( document.querySelector( 'ナビゲータのクラス'
) ) );
のエイリアスで良いと思います。）

OnsenUI doesn't work in Firefox or IE.

Steps to reproduce

1- Open Firefox
2- Navigate to http://onsenui.github.io/demo/sliding_menu_navigator_demo.html
3- Try to open the menu, or to pop a page.
4- Confirm that it doesn't work

IMHO, this is low priority, but still needed.

Currently, an ons-navigator-toolbar inside a specific page (let's imagine, page2.html) is compiled to the scope of the page that sets the ons-navigator (let's imagine, navigator1.html).
This leads into frustration, since the coder will hook to the left-click methods that he defines inside a Page2Ctrl, but ons-navigator-toolbar will look for the methods in the scope of the page that originally set the ons-navigator.

Example:

page2.html:
<div ng-controller="Page2Ctrl>

ons-navigator will look for myPage2CtrlLeftClick() in the scope of navigator1.html. The coder expects that myPage2CtrlLeftClick is inside the Page2Ctrl.

It took me a while to understand this. I don't think the actual approach is wrong (it's discussable), but the docs should clearly explain this.

I would advice updating the ons-navigator-toolbar docs, with something like "If you define custom methods for on-left-button-click and on-right-button-click, ons-navigator-toolbar will look for them in the Scope of the ons-navigator"

Hello,

I was wondering if there was a way to keep the state of a list without rerendering the entire view and hence calling the controller associated with that view.
For instance when I have a list of item, I scroll down this list and reach the nth element, and click on it when I go back I'd like to have that same list at the nth element. Right now it re-renders the entire thing and scroll back up which is what I want to avoid. Is there a way to create states and maintain them ?

I don't know if my question is clear ? That would be so great if this could be possible :)

This is a feature request to improve highly the flexibility of onsenUI in terms of navigation.

All components that perform navigation (ons_screen, ons_navigator, ons_slidingmenu, etc) should watch for changes in "page" (or behind-page, etc) and perform navigation when changes to page happen.

Components that support stack navigation (ons_navigator and ons_screen) should give an extra (bindable) property to set the navigation approach (push, resetToPage, pop).

This small change would give greater flexibility for the coder to build more powerful navigation systems. For example, this would allow the coder to create a NavigationService, with centralized navigation logic, representing the state of all navigation components. Navigation components spread across the app would simply bind to properties in the NavigationService.

If you do < ons-page ng-controller="MyCtrl" >, the scope created by the ons-page directive is a sibling of MyCtrl - so it doesn't inherit MyCtrl's scope.

The workaround is to do:

<div ng-controller="MyCtrl">
<ons-page> </ons-page>
</div>

Or:

<ons-page > 
<div ng-controller="MyCtrl">
</div>
</ons-page>

It's a bit ugly... :)

Now Hello will not be displayed.

<h1>Hello</h1>
<ons-list>

 </ons-list>

<ons-navigator hide-toolbar="true">

not working

api:

<ons-tabbar on-active-tab-changed="myFunction">

current work around:

var tabbar = document.getElementsByClassName('topcoat-tab-bar');
var tabs = tabbar[0].getElementsByTagName('input');

for(i=0; i<tabs.length; i++){
  console.log(i, tabs[i].checked)
}

When using an ons-sliding-menu or a ons-split-view, it's common the need to keep a page loaded in background, instead of reloading and re-rendering it.
Imagine the following scenario:

1- An app with an ons-sliding-menu
2- The most used page (mainPage.html) is a List with data, where the user is working with that data
3- The user frequently uses the ons-sliding-menu to navigate to other sections, but he will frequently get back to the mainPage.html
4- While navigating, mainPage.html is being re-rendered all the time. This creates two issues: a) it's really hard for the developer to keep the state of the mainPage.html b) it slows down the navigation

ons-sliding-menu should introduce the ability to keep a page cached, instead of re-rendering it completely