krs8888 krs8888 - 3 months ago 18
AngularJS Question

default state in nested ui-view in ui-router

I am working on a project where I have a created a directive for a multi step form. Essentially trying to replicate this. The project layout has a header,navigation, a content page (which includes a ui-view) depending on the tab selected on the navigation tab.

Now there is a form tab which when clicked routes to a HTML page which includes this form directive. The directive calls the template (which includes another ui-view) loads the html content but failed to load the nested state. How do I set the default state?

The project directory looks like

src
main
app
directive
formData
formData.js
formData.tpl.html
formInterest.tpl.html
formProfile.tpl.html
formFinal.tpl.html
views
header.html
leftNavigation.html
appRun.html
app.js
index.html


The app.js file has states defined as

$stateProvider
.state('landingPage', {
url: '/landingPage',
templateUrl: 'views/landingPage.html'
})
.state('appRun', {
url: '/appRun',
templateUrl: 'views/appRun.html'
})
.state('appRun.first', {
url: '/first',
templateUrl: 'directives/formData/formProfile.tpl.html'
})
.state('appRun.second', {
url: '/second',
templateUrl: 'directives/formData/formInterest.tpl.html'
})
.state('appRun.third', {
url: '/third',
templateUrl: 'directives/formData/formFinal.tpl.html'
});


The appRun.html looks like

<form-data></form-data>


The formData.js directive looks like

var formData = angular.module('formData',[]);

formData.directive('formData',function(){
return {
restrict: 'EA',
scope: {},
replace: true,
link: function($scope, element, attributes){

},
controller: function($scope,$attrs,$http){

$scope.processForm = function(){
console.log("processFrom");
}
},
templateUrl: 'directives/formData/formData.tpl.html'
}
});


the formData.tpl.html looks like

<div class="row">
<div class="col-sm-8 col-sm-offset-2">

<div id="form-container">

<div class="page-header text-center">
<h2>Let's Be Friends</h2>

<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".first"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".second"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".third"><span>3</span> final</a>
</div>
</div>

<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">

<!-- our nested state views will be injected here -->
<div ui-view></div>


</form>

</div>

<!-- show our formData as it is being typed -->
<pre>
{{ formData }}
</pre>


</div>
</div>


When I click on appRun state it shows up the content in formData.html but ui-view doesn't show a default state. How do I add a default state such that when the formData.html is loaded it also shows appRun.first state?

Answer

Use

<ng-include="'directives/formData/formProfile.tpl.html'"/>

Inside <div ui-view></div>. This will be the default page.

The other option:

  1. Mark state appRun abstract.
  2. Whenever linking to appRun link to appRun.first instead.
Comments