I can't seem to dynamically update my ui-view with ng-repeat. Is what I'm trying to do even possible? The reason I say this is because if I place any static objects in the intro.html it gets displayed..
Thanks for the help in advance,
JS
}).state('app.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'app/register/register.html',
controller: 'RegisterController'
}
}
}).state('app.register.intro', {
url: '/intro',
templateUrl: 'app/register/intro.html'
register.html
<ion-view view-title="Register">
<ion-content class="has-header">
<ui-view>
</ui-view>
</ion-content>
</ion-view>
intro.html
<div ng-repeat="value in items">
value
</div>
The first thing I noticed is your 'intro.html' file is missing a closing '>' tag for your first div.
Related
I've pretty much used the top solution from UI-Router multiple named views not working with my angular app, but my ui-view does not seem to be updating, but rather just disappearing altogether. There must be some really small detail I'm missing that I've been stuck on for a long time...
I have an index.html page, with a [div ui-view=""] that is replaced on the home state. This ui-view (frontpage.html) has another [div ui-view="search-result"] which I'm hoping gets updated (change text to "successful template replacement") from a state change, but when the state changes, the entire [div ui-view=""] from index.html disappears instead when the search button is clicked.
All relevant script tags are included in my index.html.
index.html:
<body ng-app="...">
<div class="container">
<div ui-view=""></div>
</div>
app.js:
angular.module('...', [ 'ui.router','ui.bootstrap']).
config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}).run(function(){});
frontpage.html:
<div class="row" ng-controller="MainController">
some stuff here
<div class="col-xs-9">
<input type="text" class="inline" ng-model="searchText" placeholder="Search..."></input>
<button class="btn btn-default inline" type="button" ng-click="search()">Search</button>
<div ui-view="search-result"></div>
</div>
</div>
mainCtrl.js
angular.module('...')
.controller('MainController', ['$scope','$state', function($scope,$state) {
$scope.searchText;
$scope.search = function(){
console.log('going to state search with searchText: ' + $scope.searchText);
$state.go('search',{query:$scope.searchText});
}
}]);
In case that 'search' state should go to template of the 'main' ... it must be its child (check the parent: 'main')
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
parent: 'main', // parent is main, named view will find its target
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}
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.
so i have been following a tutorial on how to use AngularJS ui route. I manage to get the views working just fine. However in trying to get the states to work and its just not working. I followed the tutorial exactly but for some reason my states to just show up. Hopefully someone can help me out.
Scirpt.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.state('home.list', {
url: '/list',
templateUrl: 'views/partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'aboutCtrl'
})
.state('/views/about', {
// Figure out later
});
});
index.html
<!-- Page Content -->
<div id="page-content-wrapper" ng-app="routerApp">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Content Page</h1>
<p>This is where the template of the vast amount of pages will be loaded. This will keep it a single page applcatino. The
main page will inject the html that needs to be loaded to the user. While the top nav bar will allow the user to
view the rest of the website, which will be separate pages
</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
<!-- Angular Template, this is where content will be injected -->
<div ng-include="pages"></div>
<div ui-view></div>
</div>
</div>
home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<div>
<ul>
<li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
</div>
Plunker
http://plnkr.co/edit/cN5uM1m20DHGps8cZgzt
Since you are using nested states and views ("home.list" is nested inside "home"), you need to include <div ui-view></div> in your home.html as well.
For further information: https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
Good luck! :)
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'
}
}
})
I'm having trouble getting my routes to match up with my views. I have the following routes:
.state('tab.account', {
url: '/account',
abstract: true,
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountController'
}
}
})
.state('tab.account.order', {
url: '/order/:id',
views: {
'order-view': {
templateUrl: 'templates/order-view.html',
controller: 'OrderController'
}
}
})
I have this in templates/tab-account.html
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
<div class="item item-text-wrap">
<b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
</div>
</div>
I have this function in the controller for that view:
$scope.viewOrder = function(id) {
$state.go('tab.account.order', {id:id});
};
Then finally I have this view for the order:
<ion-view ui-view="orderView" title="Order">
<ion-content class="has-header padding">
<h1>Your Order</h1>
</ion-content>
The url seems to work, I end up with #/tab/account/order/1 but it doesn't load that final view!
Cheers in advance!
The ui-router configuration will depend on what you're trying to do.
It looks like you want the account view and the order view to be on separate pages, in which case you won't want it to be an abstract state, since from the ui-router wiki: "An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to."
I'm not entirely sure you even want a child state for the same reason, since "child states will load their templates into their parent's ui-view." (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#nested-states--views).
If this is the case, then you can do something like this:
.state('tab.account', {
url: '/account',
templateUrl: 'templates/tab-account.html',
controller: 'AccountController'
})
.state('tab.order', {
url: '/account/order/:id',
templateUrl: 'templates/order-view.html',
controller: 'OrderController'
})
Here's a plunkr: http://plnkr.co/edit/uuEQcxbWchxQyGV7wMlw?p=preview
The views objects have been removed, since you don't really need them unless you have multiple nested views.
If however you wanted the order view on the same page, then you could do something like this: http://plnkr.co/edit/8Tb1uhVDM0HCW8cgPRfL?p=preview
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
<div class="item item-text-wrap">
<b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
</div>
</div>
<ui-view></ui-view> <!-- Where the child view will load -->
</ion-content>
</ion-view>
app.js:
.state('tab.account', {
url: '/account',
templateUrl: 'tab-account.html',
controller: 'AccountController'
})
.state('tab.account.order', {
url: '/order/:id',
templateUrl: 'order-view.html',
controller: 'OrderController'
})
You'll also probably want to remove your ion-content from the order view template, or else you might get some funky double scroll issues.
Hope this helps! Ui-router is pretty confusing, but their wiki has some great documentation and examples to clear things up.