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.
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.
Related
After implementing the following pattern, I want, however, for only specific pages to have a unique toolbar or header.
Any idea on how that can be made ? Do I need not to inject the provider and have that page as a standalone ?
I am new to Ionic so please let me know if this situation is not clear enough
My current code is the following
<ion-content class="no-scroll">
<ion-header *ngIf="page.pageName != 'MyPageWithUniqueToolbar'">
<ion-toolbar color="primary" class="sub-header">
<ion-title class="sub-header-titl1">{{ page.ToolbarTitle }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="no-scroll">
<ion-nav class="content-body" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-content>
</ion-content>
I tried to put the ngIf above like this but it errors out
<ion-content *ngIf="page.pageName != 'MyPageWithUniqueToolbar'" class="no-scroll">
For that *ngIf to work you must have a variable page defined on all your page components that have this *ngIf. If you only define this on the page that you want to show a different header it will error on all the others that don't have a variable page defined.
A quick fix for this would be to first check if the variable page exists, and then check the value of page.pageName, like below:
<ion-header *ngIf="page && page.pageName != 'MyPageWithUniqueToolbar'">
<ion-toolbar color="primary" class="sub-header">
<ion-title class="sub-header-titl1">{{ page.ToolbarTitle }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="no-scroll">
<ion-nav class="content-body" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-content>
Remember, you need the page variable defined in the component, e.g.
page = {pageName:'MyPageWithUniqueToolbar'};
Hope it helps
After some more investigation, I found the solution. By replacing ngIf by [hidden], that did the trick, see below :
<ion-nav [hidden]="page.pageName === 'MyPageWithUniqueToolbar'" class="content-body" name="bodyHeader" [root]="state.bodyHeader.current" #bodyHeader swipeBackEnabled="false"></ion-nav>
There is no shortage of S.O. questions, blogs, and bug reports about Ionic's view-title not updating. Solutions range from using the ion-nav-title directive instead of view-title, or set cache: false in app.js!
Yet none of these hacks worked for me. More importantly, none of the solutions I could find addressed the root problem. I started commenting-out my view. There was only one element that was causing problems: the modal.
My modals are housed in a tag like this:
<script id="user-modal.html" type="text/ng-template">
Looking for anyone who's been following this issue on why a script tag could cause this type of bug.
Concretely, is there any way I can continue having modals and not lose the title functionality?
PS: Leaving the script in and taking-out the <ion-modal-view> does not fix.
Still interested in why this happens, but the solution to having it working modals AND a working title bar is this:
<ion-view view-title="Profile">
<ion-content class="dark-blue">
...
<script id="user-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-dark">
Modal...
</script>
</ion-content>
</ion-view>
You must have the script inside of the ion-view and ion-content. While the modal will work on the outside, it will cause the tile to behave unexpectedly. Explanations welcome!
I've added following code to my html template:
<div ng-include src="'templates/header.html'"></div>
my header.html file contains:
<ion-header-bar align-title="center" class="bar-navigation">
<p class="center">TEST Include</p>
</ion-header-bar>
it's not rendering the ion-header-bar.
Does anyone know how to get this working please ?
As per the ngInclude documentation at: https://docs.angularjs.org/api/ng/directive/ngInclude
You use src when ng-include is being used as the element. eg.
<ng-include src="templates/header.html"></ng-include>
Otherwise, provide the template location as the value of the ng-include attribute.
<div ng-include="templates/header.html"></div>
Also, remove the single quotes from your template source, they are not necessary.
Renaming the file header.html into header.tpl.html fixed my problem.
That's because gruntfile.js includes tpl.html files only.
The included ion-nav-bar is not visible though, but I guess that's a different issue.
Thanks to #Andrew for helping out.
I have my angularjs app that has a topbar navigation, a left sidebar navigation and the rest is for the content (using data-ng-view I get different views).
My question is, if I have a view called login and a route that redirects me to the login page, how can I show that view actually in the full screen of the page?
Now if I navigate to http://applicationurl.com/#/login the view is like this:
I want it to look like this:
I cannot figure it out how can I achieve this in AngularJS?
The html is something like this:
<html>
<head>
</head>
<body>
<header>...</header> // top navigation bar
<div id="container">
<nav>...</nav> //left bar navigation
<div id="content">
<div id="wrap" data-ng-view="">
// here are loaded all the views ...
</div>
</div>
</div>
</body>
</html>
The correct solution would be to move your header/footer/sidebar into Angular Views and then use the Angular UI Router to build the pages with multiple named views where needed.
If you do not want to modify your code, it is not possible to achieve what you want to accomplish. By virtue of your login page being rendered by ng-view, it will be inserted within that tag on the page. You could hide the header and navbar with ng-hide set on some scope variable that would be set when the login page was rendered, and then the variable could be reset upon successful login/traversal to another page. This is a bit hacky, and is certainly not ideal, but is a quick and dirty fix. If you want to learn and do it correctly, Justin's suggestion is a great place to start.
I am using Angular UI Bootstrap http://angular-ui.github.io/bootstrap/. I have two questions:
I followed the example given at angular-ui.github.io, there they use
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js">
but I don't want to use the CDN so I downloaded Angular UI and added it to my project. How to include it into my code?
I did add
['ui.bootstrap'] to my angular.module, but it's not working until I add the above script code.
I'm using <tabset> to create two tabs, contacts and group. For
example, a user is in the Group tab, he wants to add members to an existing group, so if he clicks the Add Member button, I want to navigate to the Contacts tab automatically.
I thought of using document.getElementByTagName() inside my
controller. Will it work? And what is the Angular way to click
something programmatically.
Question #1:
<script src="folder_of_js/ui-bootstrap-tpls-0.10.0.js"></script>
Question #2:
You don't use document.getElementByTagName() with AngularJS, if you want to navigate to a tab while you are in another tab's content, an example might be the following:
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}">
{{tab.content}}
<button class="btn btn-default btn-sm" ng-click="tabs[2].active = true">Select third tab</button>
</tab>
</tabset>
As you can also see in this plunker, I added a button that navigates to the third tab whenever you click it.
The script file is probably not loaded by the browser. You have to add a script tag pointing to where the file is in your project. For example, if the script is placed in the folder /scripts/lib/:
<script src="/scripts/lib/ui-bootstrap-tpls-0.10.0.js" />
One of the golder rules of AngularJS is to never, for any reason, referrence the DOM (i.e. an HTML element) from a controller. So while document.getElementByTagName() will technically work, I would advice against it.
In angular, you really don't click things programmatically. The common way is to bind something in your HTML to a variable in the $scope, either by curly brackets ({{someVariable}}), or by directives such as ng-class, ng-bind etc. Then you change that variable in $scope, and the HTML changes to reflect that. Is there a variable in $scope which determines which tab is open? If so, you can just change that variable, and it should work automagically.