I'm using ionic to build a hybrid app and I can't get the ui-view to dynamically show content
this is the index
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
</body>
for my understanding the ion-nav-view work just like the ui-view from angular ui-routing.
this is my app.js
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login',{
url: '/',
template: '<h1>hello</h1>'
})
$urlRouterProvider.otherwise('/');
})
I want the word hello to show when going to the root of the app but is not working. it's not showing anything and is not giving any console error.
I suspect the "hello" is there, but it's getting obscured by the <ion-header-bar>. Try adding "has-header" as a class to the <ion-nav-view> element. That class forces the content to begin 44px lower than usual, to account for the header bar.
Here is a working CodePen. All I did was add that class.
Related
<body ng-controller="MainController as mainCtrl" ng-app="MyApp">
<div header page="'Test'" ></div>
<div id="main" class="app-body" ng-controller="MyController as ctrl">
<my-grid-list></my-grid-list>
</div>
</body>
I am trying to figure out how the header is constructed. I expect it to be something like
<header-bar></header-bar>. However, it gives header. Is it an attribute or some dialect of AngularJS syntax? This is AngularJS.
The header attribute is not a core directive in AngularJS. It could be a custom directive. Check the code for the app to see if it is defined there.
I found this.
MyApp.directive('header', function () {.
// ...
})
That is indeed a custom directive.
For more information, see
AngularJS Developer Guide - Creating Custom Directives
I am facing the same problem as "How to use multiple html files in onsenui" but the solution did not work for me.
I have 2 html files i am trying to navigate to.
index.html
<ons-page>
<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
<template id="page1.html">
<ons-page id="page1">
<ons-button onclick="myNavigator.pushPage('home.html')">home</ons-button>
</ons-page>
</template>
</ons-page>
home.html
<ons-page id="page2">
<ons-toolbar>
<div class="left">
<ons-back-button></ons-back-button>
</div>
</ons-toolbar>
</ons-page>
When i click on "home" button i get an error:
Uncaught (in promise) Error: [Onsen UI] HTML template must contain a single root element
at Object.Q.throw (onsenui.min.js:2)
at Object.Q.createElement (onsenui.min.js:2)
at onsenui.min.js:2
I tried adding template and html body to home.html but I got different errors. Is there a way to place templates in different html files?
ughghgh the issue was due to http-server caching my pages in node.js!
I created and ionic project using the command
ionic start sideMenu http://codepen.io/vialware/pen/ypoxd
I expected the app to be like what is shown below.
Nevertheless, when I run it something is missing, the menu button. It is being created I guess using in the header using this tag:
<ion-view title="'Welcome'" hide-back-button="true" left-buttons="menuButton">
I'm able to build and emulate the project without any errors and so I'm wondering whether I might have done something wrong and if anyone might have a hint on how to solve this problem (I'm new to both Ionic and AngularJS).
You can also use this :
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Title!</h1>
</ion-header-bar>
But don't forgot to put has-header to your content or your content will be behind this header bar
<ion-content class="has-header">
// Content
</ion-content>
In order to have that specific header, here's what your code should look like:
<div class="bar bar-header bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Welcome</h1>
</div>
Note that the bar-positive class is only setting the blue color background on the header.
In my case, the change I made is, added attribute enable-menu-with-back-views="true" as below. Then sidemenu button and content is shown in all views.
<ion-side-menus enable-menu-with-back-views="true">
Please refer below link:
http://ionicframework.com/docs/api/directive/menuClose/
How are you running your app? If you are just opening your index.html plainly on a browser it most probably won't work... Try running it using localhost (local web server).
Assuming this is true... You need to turn IIS Server on and run your site there
If you don't know how, you can try this tutorials below.
http://www.iis.net/learn/install/installing-iis-7/installing-iis-on-windows-vista-and-windows-7- https://www.youtube.com/watch?v=dZAbdmPrU4g
HOPE THIS HELPS :)
I created a navigation bar using ionic-nav-bar. Added an h1 element with class title. But it's not displaying anything.
Here's my code
<ion-pane>
<ion-nav-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-nav-bar>
<ion-content>
</ion-content>
</ion-pane>
However, this is working:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
So what am i doing wrong?
<ion-nav-bar class="bar-positive">
<ion-nav-title>hello</ion-nav-title>
</ion-nav-bar>
This Will solve your problem.
That would be the html file of your view:
<ion-view title='My Title' class="dashboard">
<ion-content>
</ion-content>
</ion-view>
In your case you should wrap all that in an other ion-nav-view-element, because you are using the
ion-nav-bar-element.
The ion-nav-bar will be your navigation bar and you will have ion-views that will be plugged into the ion-content section. You would never want one title if you have a nav bar because the title should change as you navigate across ion-views. When you create you ion-view tag add a view-title attribute. Then when that view is active it will automatically update the header no h1 tag required.
The ion-header approach works because ion-header is designed to be a static and not dynamically update like a navigation header would.
The fact is that your
<h1>Test</h1>
tag is displayed but it is placed behind your <ion-nav-bar></ion-nav-bar>. As Anand suggested in answer above you should use <ion-nav-title>Test</ion-nav-title> to get expected result.
Hope this helps.
In my index.html I have a sidebar that needs to be displayed only for certain views and not for all. So this sidebar is inside index.html and below it is the ng-view div. Also a global controller is associated with the body tag.
<body ng-controller='init'>
<div class='sidebar' ng-show='sidedisplay'>
</div>
<div ng-view=''></div>
</body>
Inside my init controller by default I have : $scope.sidedisplay = false; console.log('Here');
Now when I run the project, the html loads and I see the sidebar and then after some 4-5 seconds i get here in the console log and the sidebar disappears. Why is the controller loading so much later than the HTML?? How can i rectify this?
You probably want to make use of ng-cloak.