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 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.
