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>
Related
I am new to angular material. I'm using material-cards in row layout.I want those cards to act like urls. When I right click on them I want to have options like Open in a new tab and all.If you can help me then that would be great.
Actually wrapping in tag works as #jeff-carey suggested above, I've just tried in Chrome browser:
<a href="http://google.com" style="display:block">
<md-card>
<md-card-content>
TEST
</md-card-content>
</md-card>
</a>
But seems it's not so good from ideological prospective.
To give a brief rundown of what I am working on:
This app is a phonebook that makes a call to our backend system and returns a JSON payload which is then parsed and stored to Local Storage for offline access and then the data is reflected in a simple homescreen format.
To give a simple workflow:
User logs in
Call to back-end via Ajax request is made under the user's account
Data is stored to local storage
Data is added to $rootScope.allEmployeeInformation variable
Ion-List reflects the data stored in the $rootScope.allEmployeeInformation variable on the home screen.
My issue lies here:
After logging in the data is pulled and stored properly but the Ion-List does not display the data until the page is refreshed either via the pull to refresh functionality I have implemented, the re-sync button or restarting the app.
Is there any way to ensure that these pieces of data are displayed without the user needing to refresh the page?
Would be more than happy to provide anymore information needed. Thank you for the help guys!
Edit, updating with some code as requested:
Code which performs the ajax request
Html which displays the information:
<ion-view>
<ion-content class="scroll-content has-header animated fadeIn" ng-controller="HomeScreenController" padding="true">
<ion-refresher
pulling-text="Pull to resync...."
on-refresh="resyncEmployees(true)">
</ion-refresher>
<ion-list>
<ion-item
class="ion-item-content"
ng-repeat="employee in allEmployeeInformation | orderBy:'lastName'"
ng-controller="AccountCtrl"
ng-click="changeTabb(1, {{employee.identifier}})">
<div class="item-icon-left">
<i class="icon ion-person"></i>
<h3>{{employee.userCN}}</h3>
<h5>{{employee.title}}</h5>
<h6>{{employee.town}}</h6>
</div>
<div class="item-icon-right">
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Edit #2: I believe I've narrowed to down to infact being an issue with ng-repeat and not Ion-List as I expected at first glance. Updating the reference tags.
Cheers!
Mike
Pretty easy - you're using jQuery's $.ajax and that doesn't trigger a digest cycle. Digest cycles are what tell Angular to update and 2 way bind essentially (dumbed down). Use the provided Angular $http module.
$http.get(agent).then(function(response) {
});
Also, you're calling location.reload() at the end of your code - which will get rid of any client changes you've made so far. You probably don't need that.
Without seeing any code, you could also try setting cache: false in the routes config. See example below:
.state('dashboard', {
cache: false,
url: '/dashboard',
views: {
'menuContent' : {
templateUrl: 'templates/dashboard.html',
controller: 'DashboardController',
}
}
})
If you have any code available to post I may be able to help more.
EDIT
Why do you need to use $rootscope? You should also try using $scope instead because you will always have access to the employee information in localStorage if you want to use it in another view or controller.
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 am using ionic (the original one, not meterionic) within meteorjs.
when i am using ion-item with a href the page is reloading, what i dont want to.
i tried to use and is normally changing the state without reloading.
How can i change the behavior of ion-item to change only the state without reloading the whole single-page-application?
<ion-list>
<ion-item href="/home">Home (Page Reload)</ion-item>
<ion-item>Home (no Page Reload)</ion-item>
</ion-list>
ok, that one was obvious. it has to look like that:
<ion-item ui-sref="app.home">Home</ion-item>
try to put a hash before the slash href="#/home" or just use ui-sref ui-sref="home"
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.