So I have a route setup like the following:
'use strict';
module.exports = function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise('/');
// Now set up the states
$stateProvider
.state('index', {
url: '/',
templateUrl: 'scripts/partials/index.html'
})
.state('new-report', {
url: '/new',
abstract:true,
templateUrl: 'scripts/partials/new-report.html',
deepStateRedirect: true,
sticky: true,
controller: 'reportCtrl'
})
.state('new-report.first', {
url: '',
templateUrl: 'scripts/partials/new-report.first.html',
controller: 'reportCtrl'
})
.state('new-report.second', {
url: '',
templateUrl: 'scripts/partials/new-report.second.html'
})
.state('new-report.third', {
url: '',
templateUrl: 'scripts/partials/new-report.third.html'
})
.state('new-report.fourth', {
url: '',
templateUrl: 'scripts/partials/new-report.fourth.html'
})
.state('new-report.fifth', {
url: '',
templateUrl: 'scripts/partials/new-report.fifth.html'
})
.state('new-report.sixth', {
url: '',
templateUrl: 'scripts/partials/new-report.sixth.html'
})
.state('new-report.seventh', {
url: '',
templateUrl: 'scripts/partials/new-report.seventh.html'
})
.state('new-report.complete', {
url: '',
templateUrl: 'scripts/partials/new-report.complete.html'
})
.state('my-reports', {
url: '/reports',
templateUrl: 'scripts/partials/my-reports.html'
})
.state('my-settings', {
url: '/settings',
templateUrl: 'scripts/partials/my-settings.html'
});
};
With a controller of:
'use strict';
module.exports = function($scope) {
$scope.report = {
incident_type: ''
};
};
And a set of views like:
<div ui-view='new-report'>
<div class='side-panel'>
<h3> Incident Report </h3>
<div class='divisor text-lowercase white twentyonepx'>
<hr class='left' /> # <hr class='right' />
</div>
<h3> 12‑123456 </h3>
<ol>
<hr />
<li><img ui-sref-active="active-first" class='first' /><a
ui-sref='new-report.first'>Type of Fire</a></li>
<li><img ui-sref-active="active-second" class='second' /><a
ui-sref='new-report.second'>Structure</a></li>
<li><img ui-sref-active="active-third" class='third' /><a
ui-sref='new-report.third'>Exposure</a></li>
<li><img ui-sref-active="active-fourth" class='fourth' /><a
ui-sref='new-report.fourth'>Symptoms</a></li>
<li><img ui-sref-active="active-fifth" class='fifth' /><a
ui-sref='new-report.fifth'>Chemicals</a></li>
<li><img ui-sref-active="active-sixth" class='sixth' /><a
ui-sref='new-report.sixth'>Medical Attention</a></li>
<li><img ui-sref-active="active-seventh" class='seventh' /><a
ui-sref='new-report.seventh'>E.M.S</a></li>
</ol>
<div class='progress-section'>
<h3> Progress </h3>
<br/>
<div class="progress">
<div class="progress-bar progress-bar-striped active"
role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
</div>
<div class='submit'>
<a href='#' class='submit-report'> Submit Report </a>
</div>
</div>
<ng-include src="'scripts/partials/user-info.html'"> </ng-include>
<div class='report'>
<ui-view></ui-view>
</div>
</div>
<div class='report-section first'>
<div class='header'>
<hr class='left left-rule'/> Part 1 - Type of Fire <hr class='right' />
</div>
<div class='form-group'>
<div class='left-side'>
<div class='form-element'>
<label for='incident-date'>Date of Incident</label>
<datepicker></datepicker>
</div>
<div class='form-element'>
<label for='incident-type'> Type of Fire </label>
<select class='form-control' name='incident-type'
ng-model='report.incident_type'>
<option> Chemical </option>
<option> Option 2 </option>
</select>
</div>
</div>
<div class='right-side'>
<div class='form-element'>
<div class='form-group'>
<label for='incident-location'>Incident Location</label>
<input class='form-control' type='text' placeholder='Street'
/><br/>
<input class='form-control' type='text' placeholder='City' /><br/>
<input class='form-control small' type='text'
placeholder='County' />
<input class='form-control small' type='text' placeholder='Zip' />
</div>
</div>
</div>
<div class='bottom-btns'>
<a ui-sref='new-report.second'>Next</a>
</div>
</div>
</div>
My main app load point is set up like the following (I'm using gulp and
browserify to help with loading stuff):
'use strict';
//lib dependencies listed out
var $ = require('jquery');
var jQuery = $;
var bootstrap = require('bootstrap');
//controllers
var rootCtrl = require('./controllers/rootCtrl');
var reportCtrl = require('./controllers/reportCtrl');
var ui_router = require('angular-ui-router');
var ui_router_extras = require('ui-router-extras');
var routes = require('./routes');
var namespace = 'main';
var angular = require('angular');
var app = angular.module(namespace, [
// inject:modules start
'ui.router',
'ct.ui.router.extras'
// inject:modules end
])
.controller('rootCtrl', ['$scope', rootCtrl])
.controller('reportCtrl', ['$scope', reportCtrl])
.config(routes);
module.exports = app;
I want to be able to go between different views of my multipart form using
ui-router since it is so SLICK. Only problem is that I can't get my
variables on the controller to persist between states. I've tried the
ui-router-extras but it hasn't helped, either I'm using it wrong or
something else is going wrong. Anyone have experience with this? Basically
I want to be able to have a form in 7 parts, each part represented as a
state within ui-router with the same controller for each. I want to be able
to go back and forth throughout the report process to each state. Each will
update a scope variable representing the overall report and at the end I'm
going to use $http to post it to my database.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
