The reportCtrl should be shared between all seven, though I don't know if I
set it up correctly. I'm kind of new to ui-router so some of this is still
magic to me. From what I can tell I just define the controller option in
the object I pass to the state as the same and it should be sharing the
variables. Though when I update part of the form and then move to another
state and try to display that ng-model that was updated I don't see
anything, and if I go back to the original state it just defaults to the
default state for the ng-model in question.
Hope that makes sense.
On Thursday, November 27, 2014 6:39:58 PM UTC-8, Michael Cranston wrote:
>
> Do you have a parent controller of these 7 states that can remember the
> data along the way? Or is that a shared service between the controllers?
>
> On Thursday, 27 November 2014 21:31:36 UTC-5, Ben Nelson wrote:
>>
>> 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.
