I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.
Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})
Related
Following is my simple routes in app.js -
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'signupCtrl'
})
.state('profile', {
url: '/profile',
abstract: true,
templateUrl: 'templates/profile.html',
})
.state('profile.init', {
url: '/profile-init',
templateUrl: 'templates/profile-init.html'
})
I created a button in signup page on click which should take the user to profile-init page code - $state.go('profile.init')
in profile.html I placed -
<ion-content style="background: #c3c3c3"></ion-content>
in profile-init.html page -
<ion-header-bar class="bar-positive">
<h1 class="title">Profile</h1>
</ion-header-bar>
<div class="row">
<div class="col col-10"></div>
<div class="col col-80 padding">
Thanks for showing your interest
</div>
<div class="col col-10"> </div>
</div>
<ion-footer-bar class="bar-stable">
<button class="button button-clear" ng-click="hello()">Forward</button>
</ion-footer-bar>
But it is moving to /#/profile/profile-starter page but only a background color is coming not text, though I checked the browser console template is loading, let me know what I am doing wrong here.
Create ion-nav-view
<ion-nav-view name="profile"></ion-nav-view>
and modify routes in app.js
.state('profile.init', {
url: '/profile-init',
views: {
'profile': {
templateUrl: 'templates/profile-init.html'
}
}
})
Can't comment yet, and not available to test it but I think you need to use dot ('.') in your file name:
templateUrl: 'templates/profile.init.html'
And of course change the file name too.
Hi I'm relatively new to ionic and I'm trying to get an app running with both a side-menu and a tab bar. Currently the tab bar is working fine just the left side menu does not open when I click the icon. For most of the app I've just been working off of the tutorials on the ionic website.
I am adding google maps to the tabs and I am aiming to have facebook login for the sidebar but the main issue is the tab isn't toggling.
app.js
$stateProvider
.state('menu', {
url: "/menu",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('menu.playlists', {
url: "/playlists",
views: {
'menu' :{
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/map');
tab-map.html
<ion-view view-title="Safety First">
<ion-nav-buttons side="left" ng-controller="AppCtrl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content ng-controller="MapCtrl">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menu" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/about">
About
</ion-item>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here is an image of the app's main page
When I click the submenu icon it does not toggle the submenu. The odd part is that If I navigate the app to http://localhost:8100/#/menu/playlists the toggling is fine.
Any suggestions on why nothing is really firing on the click? Perhaps its an issue of which controller is acting at the time?
You have to call the correct function. I'm assuming login() is located inside AppCtrl controller. Because of that, ng-click can't find the function, unless you tell it where it's located. Since AppCtrl is responsible for menu.html, you have to call it like this:
ng-click="this.login()"
I just started using ionic a few days ago, and I came into an issue.
I am trying to do a side menu where the content would be linked to data present into a controller, and I managed to do it. But what I can't find a solution to, is when you click into that element in the side menu, it shows the full data about the element using the id to find it.
I don't really know how to explain it, so it might be more clear with some code :
app.js :
config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
//leaderboard special menu
.state('leader', {
url: '/leader',
abstract: true,
templateUrl: 'templates/leaderMenu.html',
controller: 'UserCtrl'
})
.state('leader.single', {
url: '/users/:leaderId',
views: {
'menuContent': {
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
}
}
})
.state('leader.user', {
url: '/user',
templateUrl: 'templates/leader_user.html'
})
controller.js :
.controller('UserCtrl', function ($scope) {
$scope.leaderboard = [
{ image: 'jean_kevin.jpg', name: 'Jean-caca', id: 1, star_number: 50 },
{ image: 'jean_kevin.jpg', name: 'Jean-kevin', id: 2, star_number: 42 },
{ image: 'jean_kevin.jpg', name: 'Jean-kevin', id: 3, star_number: 20 }
];})
leaderMenu.html :
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">LeaderBoard</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="user in leaderboard" menu-close href="#/leader/users/{{user.id}}">
<div class="item item-avatar">
<img src="/img/{{user.image}}" />
<h2>{{user.name}}</h2>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
and user.html :
<link href="../css/my_account.css" rel="stylesheet">
<ion-view view-title="User">
<ion-content>
<div class="photoList">
<ion-list>
<ion-item ng-repeat="user in leaderboard">
<div class="item item-thumbnail-left" style="border:0px">
<img src="../img/{{user.image}}" />
<h2>{{user.name}}</h2>
{{user.star_number}} <i class="icon ion-star"></i>
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
I know it's not the right way to do in user.html, but I have no idea how to get the id that was selected in that page.
Thanks for your help
You can acces route parameters in controller by using $stateParams service. For your case you can access leaderId like this $stateParams.leaderId. Dont forget to include $stateParams in your controller. One more thing, by seeing your code, i will suggest you to use different controllers. You are using same UserCtrl for sidemenu and other page.
See this Documentation to $stateParams.
i am kinda new to this UI-Routing concept, so i was wondering the following.
Is it possible to change a top view from within a nested one.
So we start at index and call Account state within that view i call the Account.login view by using:
<a ui-sref="Account.login"></a>
Now is it possible to call the Index state again from within Account.login view and how would one accomplish that.
.state('Home', {
url: "/",
templateUrl: "pages/Home.html",
})
.state('Account', {
url: "/profile",
templateUrl: "pages/Account.html"
})
.state('Account.login', {
url: "/login",
templateUrl: "pages/Account_Login.html"
})
.state('Account.register', {
url: "/register",
templateUrl: "pages/Account_Register.html"
})
Working with Ionic Framework.
Main Page:
<ion-header-bar align-title="center" class="custom_Header">
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon" style="background-color:#4D8693"></button>
</div>
<h1 class="title"><a ui-sref="Home" style="text-decoration: none"><img src="img/Header.png" /></a></h1>
<div class="buttons">
<button menu-toggle="right" class="button button-icon icon ion-gear-b" style="background-color:#4D8693"></button>
</div>
</ion-header-bar>
<ion-content class="has-header">
<ion-nav-view></ion-nav-view>
</ion-content>
Account.html:
<div class="has-header">
<a ui-sref="Home">
<img src="img/test.png" />
</a>
</div>
If i now press on that image on Account view, it will return me to my main page but without my buttons in the header, the image in the middle is still there.
Including: http://play.ionic.io/app/2f5cc1913037
When I put my ion-header-bar in a seperate file (header-dash.html) and assign it as a directive "headerDash", I seem not to be able to access my DashCtrl or the controller of my view where the header-dash directive is called. More specific, in the code below, I cannot call the function changeDashMode(). However, when I replace <header-dash></header-cash> with the content of header-dash.html, then everything works fine.
I guess it has something to do with the setup of the directive, anyone thoughts?
Update: newImport() also in header-dash does work... it is when I added another function changeDashMode that it does not work. What is going on?
controllers.js
.controller('DashCtrl', function($scope) {
// -------------------------------------------------------------------------
// Init
$scope.dashMode = false;
// ---------------------------------------------------------------------------
$scope.changeDashMode = function() {
console.log("test")
if (!$scope.dashMode) {$scope.dashMode = true;} else {$scope.dashMode = false;}
}
// and the rest of the controller
// ...
})
header-dash.html
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button button-light" ng-click="newImport()">+ New</button>
</div>
<h1 class="title"><logo></logo></h1>
<div class="buttons" ng-controller="DashCtrl">
<button class="button button-light" ng-show="!dashMode" ng-click="changeDashMode()">Select</button>
<button class="button button-light" ng-show="dashMode" ng-click="changeDashMode()">Edit</button>
</div>
</ion-header-bar>
tab-dash.html
<ion-view view-title="Dashboard">
<header-dash></header-dash>
<ion-content has-bouncing="true" has-header="true">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item>Select mode? {{dashMode}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
directives.js
angular.module('starter.directives', [])
.directive('headerDash', function() {
return {
restrict: 'E',
templateUrl: 'templates/header-dash.html' // tried to add controller: "DashCtrl" but that didnt work
}
})
Is tab-dash.html being the template displayed by the DashCtrl?
Because in header-dash.html, you're using ng-controller again, creating an child scope, effectively having DashCtrl in DashCtrl
<div class="buttons" ng-controller="DashCtrl">