Should it? I wasn't sure about that. I thought it should be used by the parent as well as the children, but are you saying I should try and set it up differently?
I could set up a parentReportCtrl and then have the children share reportCtrl but I'm not sure if that's the way I should set it up or not. On Nov 27, 2014, at 6:45 PM, Michael Cranston <[email protected]> wrote: > Why is reportCtrl being used by new-report and new-report.first? Shouldn't it > only be used by one? > > On Thursday, 27 November 2014 21:42:39 UTC-5, Ben Nelson wrote: > 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 a topic in the Google > Groups "AngularJS" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/angular/rOyJoqy9hVg/unsubscribe. > To unsubscribe from this group and all its topics, 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. -- 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.
