This is my problem :
I'm using multi-views with ui-router.
My first view corresponds to my base template which includes my form tags :
<form ng-submit="next(myform, test)" name="myform" method="post" role="form">
My second view contains the contents of my form input fields and suitable ng -model.
My third view includes a directive (since this block will be repeated on other pages ) that corresponds to validate my form.
My problem is this, When I Click the submit button that is in my directive I can not retrieve the object of my form, the result returns undefined .
console.log(obj); ---> return undefined
What would be the solution to retrieve the object of my form in my directive ?
Is it possible to integrate the tags in the views ?
Thank you in advance for all your answers
My example : http://plnkr.co/edit/6p0zLTSK5sdV4JOvxDVh?p=preview
Apps.js :
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/about');
$stateProvider
.state('about', {
url: '/about',
views: {
'': {
templateUrl: 'partial-about.html'
},
'columnOne#about': {
templateUrl: 'content-form.html',
controller: 'scotchController'
},
'columnTwo#about': {
templateUrl: 'footer-form.html'
}
}
});
});
routerApp.controller('scotchController', function($scope) {
});
routerApp.directive('btnNext', ['$http','$state', function($http,$state) {
/* Controller */
var controllerPagination = function($scope){
var vm = this;
/* Bouton Suivant */
vm.next= function(form,obj) {
console.log(obj);
};
};
/* Template */
var template = '<button type="submit" class="btn bt-sm btn-primary" ng-click="pagination.next(myform.$valid,test)">Suivant</button>';
return {
restrict: 'E',
scope:true,
template: template,
controller: controllerPagination,
controllerAs : 'pagination'
}
}]);
index.html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
partial.about.html :
<h2>myForm</h2>
<div class="row">
<form ng-submit="next(myform, test)" name="myform" method="post" role="form">
<div class="col-sm-12" style="border:1px solid red">
<div ui-view="columnOne"></div>
</div>
<div class="col-sm-12" style="border:1px solid blue">
<div ui-view="columnTwo"></div>
</div>
</form>
</div>
content-form :
<div class="container">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" ng-model="test.email" placeholder="Enter email" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" ng-model="test.password" id="pwd" placeholder="Enter password" required>
</div>
</div>
footer-form.html :
<btn-next></btn-next>
Options are always the same:
shared controller
service
events
IMO the quickest solution here is the shared controller. Change
'': {
templateUrl: 'partial-about.html'
},
'columnOne#about': {
templateUrl: 'content-form.html',
controller: 'scotchController'
}
to
'': {
templateUrl: 'partial-about.html',
controller: 'scotchController as vm'
},
'columnOne#about': {
templateUrl: 'content-form.html'
}
and use vm.test instead of test everywhere. See: http://plnkr.co/edit/za4k0X6XHIk6vsXryPav?p=preview
Related
I have 4 files, View, a Module, a controller and a factory :
Module : project.module.js
(function () {
'use strict';
angular.module('BlurAdmin.pages.projects', [])
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('projects', {
url: '/projects',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
abstract: true,
title: 'Les projets',
Controller : 'ProjectController',
sidebarMeta: {
icon: 'ion-compose',
order: 250,
},
.state('projects.add', {
url: '/add',
templateUrl: 'app/pages/projects/add/addProject.html',
title: 'Ajouter un projet',
sidebarMeta: {
order: 800,
},
.state('projects.list', {
url: '/list',
templateUrl: 'app/pages/projects/list/listProjects.html',
title: 'List',
sidebarMeta: {
order: 900,
},
});
$urlRouterProvider.when('/projects','/projects/list');
}
})();
Controller : ProjectController.js
(function(){
'use strict';
angular.module('BlurAdmin.pages.projects')
.controller('ProjectController', ProjectController);
function ProjectController($state, $stateParams, $log, $scope, projectFactory) {
<!-- Value to show -->
$scope.addMessage = "see ME";
...}
})();
Factory : projectFactory.js
function(){
'use strict';
angular.module('BlurAdmin.pages.projects')
.factory('projectFactory', projectFactory);
function projectFactory($http, $stateParams) {
var factory = {};
....
}})();
View : addProject.html
<div class="col-md-6">
<div
ba-panel
ba-panel-title="Ajouter un projet"
ba-panel-class="with-scroll">
<form name="ProjectForm" ng-submit="setProject()" ng-init="getProjectById()">
<!-- Value to show -->
Show me the add message : {{addMessage}}
<div class="form-group">
<label for="titre">Titre du projet</label>
<input type="text" class="form-control" id="titre" placeholder="Titre">
</div>
<div class="form-group" ng-controller="datepickerpopupCtrl">
<label>Date de début: <em>{{dt | date:'fullDate' }}</em></label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" datepicker-options="options" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" show-button-bar="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<section class="col-md-6 col-lg-3">
<button progress-button="progressFunction()" pb-style="rotate-side-up" class="btn btn-danger">Submit</button>
</section>
</form>
</div>
</div>
</div>
Now the state is loaded perfectly and everything is working fine but when I try to load a variable from the controller in the View it doesn't show.
And I'm loading the scripts in the index page :
<script src="app/pages/projects/projects.modules.js"></script>
<script src="app/pages/projects/projectFactory.js"></script>
<script src="app/pages/projects/ProjectController.js"></script>
<script src="app/pages/projects/add/addProject.html"></script>
P.S: I have an error and I don't know if it's related or not :
projects.html:2 Uncaught SyntaxError: Unexpected token <
P.S: I'm using this BootsTrap template
Below I have a button that is attached to each venue list item. So each list item has its own button. Also, each list item is a object. So when I click one of buttons I need to somehow grab the ID from that specific list item and be able to use it in my dialogcontroller.
<div class="results">
<div class="searchbox col-md-6 form-group">
<input type="text" placeholder="search venues" class="form-control" ng-model="filterTerm">
<ul class="list-unstyled">
<li class="well" ng-repeat="venues in venues | filter: filterTerm">
<h3>{{venues.name}}</h3>
<p>{{venues.info}}</p>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event, venues)" flex-sm="100" flex-md="100" flex-gt-md="auto">Add a Review</md-button>
<button>See Reviews</button>
</li>
</ul>
</div>
My get call to my JSON file. Also, This is my ng-click function that is using mdDialog (which opens a popup window with a reviewForm.html as its content.
$http.get('/getMarkers').success(function(response) {
$scope.venues = response;
console.log($scope.venues);
});
$scope.showAdvanced = function(ev, venues){
$mdDialog.show({
controller: DialogController(ev,venues),
templateUrl: 'views/reviewForm.html',
parent:angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
};
This is my DialogController which is handling the content(reviewForm.html) that is being rendered in my mdDialog window.
function DialogController($scope, venues, $mdDialog) {
console.log(venues);
$scope.rate = 0;
$scope.max = 5;
$scope.hoveringStaff = function (value) {
$scope.overStar = value;
$scope.percent = 100 * (value / $scope.max);
console.log($scope.overStar);
};
}
This is the html that is going into the dialog
<md-dialog aria-label="Review Form">
{{something}}
<md-toolbar>
{{venues}}
<div class="md-toolbar-tools">
<h2>Review Form</h2>
<span flex></span>
</div>
</md-toolbar>
<md-dialog-content>
{{$scope.something}}
<label>{{something}}Show Attended: </label><input type="text" ng-model="show"><br/>
<label>Date: </label><input type="date" ng-model="date"><br/>
<label>Staff Friendliest: </label><uib-rating ng-model="rate" max="max" on-hover="hoveringStaff(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating><br/>
<label>Sound Quality: </label><input type="text" ng-model="sound"><br/>
<label>Favorite Drink/Cocktail: </label><input type="text" ng-model="drink"><br/>
<label>Nearby Bar/Food Recommendations: </label><input type="text" ng-model="nearby"><br/>
<label>Comments: </label><input type="text" ng-model="comments"><br/>
<label>Venue Rating: </label><br/>
<md-button class="md-raised md-primary" ng-click="sendReview()">Primary</md-button>
</md-dialog-content>
I need the ID because I am going to posting a form to the database and need to add the form content to the selected list item. Sorry if this is confusing, let me know if you have any questions. Thanks!
I think you might need to use locals or resolve to pass objects to the new controllers, because of angular's dependency injection, passing objects to the controller will not work (i.e MyController($scope, a, b)).
ex:
$mdDialog.show({
locals: {
venue: venue
}
});
or with resolve
$mdDialog.show({
resolve: {
venue: function(){return venue;}
}
});
Another issue which I think is a typo, is in the ng-repeat directive venues in venues which should be venue in venues.
Reference the view values to venue object(i.e venue.drink, venue.date, ...ect) instead of $scope, will make it easier to pass it back to the parent controller.
function MainCtrl($http, $scope, $mdDialog) {
/*
$http.get('/getMarkers').success(function(response) {
$scope.venues = response;
console.log($scope.venues);
});
*/
$scope.venues = [{
name: 'Venue #1',
info: 'Info',
date: new Date(),
drink: 'A drink'
}];
$scope.showAdvanced = function(ev, venue) {
$mdDialog.show({
controller: 'DialogController',
template: '<md-dialog aria-label="Review Form">\
{{venue.name}}\
<md-toolbar>\
{{venue}}\
<div class="md-toolbar-tools">\
<h2>Review Form</h2>\
<span flex></span>\
</div>\
</md-toolbar>\
<md-dialog-content>\
{{venue.name}}\
<label>{{venue.name}}Show Attended: </label><input type="text" ng-model="venue.show"><br/>\
<label>Date: </label><input type="date" ng-model="venue.date"><br/>\
<label>Staff Friendliest: </label><uib-rating ng-model="venue.rate" max="max" on-hover="hoveringStaff(value)" on-leave="overStar = null" titles="[\'one\',\'two\',\'three\']" aria-labelledby="default-rating"></uib-rating><br/>\
<label>Sound Quality: </label><input type="text" ng-model="venue.sound"><br/>\
<label>Favorite Drink/Cocktail: </label><input type="text" ng-model="venue.drink"><br/>\
<label>Nearby Bar/Food Recommendations: </label><input type="text" ng-model="venue.nearby"><br/>\
<label>Comments: </label><input type="text" ng-model="venue.comments"><br/>\
<label>Venue Rating: </label><br/>\
<md-button class="md-raised md-primary" ng-click="sendReview()">Primary</md-button>\
</md-dialog-content>',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
locals: {
venue: venue
}
})
};
}
function DialogController($scope, venue, $mdDialog) {
$scope.venue = venue;
console.log(venue);
$scope.rate = 0;
$scope.max = 5;
$scope.hoveringStaff = function(value) {
$scope.overStar = value;
$scope.percent = 100 * (value / $scope.max);
console.log($scope.overStar);
};
}
angular.module('MyApp', ['ngAria', 'ngAnimate', 'ngMaterial'])
.controller('MainCtrl', MainCtrl)
.controller('DialogController', DialogController);
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MainCtrl">
<div class="results">
<div class="searchbox col-md-6 form-group">
<input type="text" placeholder="search venues" class="form-control" ng-model="filterTerm">
<ul class="list-unstyled">
<li class="well" ng-repeat="venue in venues | filter: filterTerm">
<h3>{{venue.name}}</h3>
<p>{{venue.info}}</p>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event, venue)" flex-sm="100" flex-md="100" flex-gt-md="auto">Add a Review</md-button>
<button>See Reviews</button>
</li>
</ul>
</div>
</div>
</body>
</html>
The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working.
index.html
<html class="no-js" ng-app="mainApp" ng-controller="MainCtrl">
<head> ....
</head>
<body class="home-page">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
...
signup.html
<div class="form-container col-md-5 col-sm-12 col-xs-12">
<form class="signup-form">
<div class="form-group email">
<label class="sr-only" for="signup-email">Your email</label>
<input id="signup-email" type="email" ng-model="user.email" class="form-control login-email" placeholder="Your email">
</div>
<!--//form-group-->
<div class="form-group password">
<label class="sr-only" for="signup-password">Your password</label>
<input id="signup-password" type="password" ng-model="user.password" class="form-control login-password" placeholder="Password">
</div>
<!--//form-group-->
<button type="submit" ng-click="createUser()" class="btn btn-block btn-cta-primary">Sign up</button>
<p class="note">By signing up, you agree to our terms of services and privacy policy.</p>
<p class="lead">Already have an account? <a class="login-link" id="login-link" ui-sref="login">Log in</a>
</p>
</form>
</div><!--//form-container-->
app.js
angular
.module('mainApp', [
'services.config',
'mainApp.signup'
])
.config(['$urlRouterProvider', function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}])
signup.js
'use strict';
/**
* #ngdoc function
* #name mainApp.signup
* #description
* # SignupCtrl
*/
angular
.module('mainApp.signup', [
'ui.router',
'angular-storage'
])
.config(['$stateProvider', function($stateProvider){
$stateProvider.state('signup',{
url: '/signup',
controller: 'SignupCtrl',
views: {
'header': {
templateUrl: '/pages/templates/nav.html'
},
'content' : {
templateUrl: '/pages/signup/signup.html'
},
'footer' : {
templateUrl: '/pages/templates/footer.html'
}
}
});
}])
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {
$scope.user = {};
$scope.createUser = function() {
$http({
url: 'http://localhost:3001/users',
method: 'POST',
data: $scope.user
}).then(function(response) {
store.set('jwt', response.data.id_token);
$state.go('home');
}, function(error) {
alert(error.data);
});
}
});
There is a working plunker. Firstly, check this Q & A:
Are there different ways of declaring the controller associated with an Angular UI Router state
Where we can see, that
controller does not belong to state. It belongs to view!
This should be the state definition:
$stateProvider.state('signup',{
url: '/signup',
//controller: 'SignupCtrl',
views: {
'header': {
templateUrl: 'pages/templates/nav.html'
},
'content' : {
templateUrl: 'pages/signup/signup.html',
controller: 'SignupCtrl',
},
'footer' : {
templateUrl: 'pages/templates/footer.html'
}
}
});
Check it here
You need a template to bind a controller.
In the docs ui-router Controllers
Controllers
You can assign a controller to your template. Warning: The controller
will not be instantiated if template is not defined.
I am using the ui.router. First when I just set the home state everything was working fine. But after adding the articles state my routing wouldn't work. I have following angular code:
var app = angular.module('ibrahimsBlog', ['ui.router'])
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'PrimaryController'
});
.state('articles', {
url: '/articles/{id}',
templateUrl: '/articles.html',
controller: 'ArticlesController'
});
$urlRouterProvider.otherwise('home');
}])
app.factory('articlesFactory', [function(){
var art = { articles: [] };
return art;
}])
app.controller('ArticlesController', [
'$scope',
'$stateParams',
'articlesFactory',
function($scope, $stateParams, articlesFactory){
$scope.article = articlesFactory.articles[$stateParams.id];
}]);
app.controller('PrimaryController', [
// Two Way Data Binding ist nur möglich mit scope Variablen.
'$scope',
'articlesFactory',
function($scope, articlesFactory) {
$scope.articles = articlesFactory.articles;
$scope.articles = [
{ title : 'foo', content : "foo", likes : 5, date : '12/15/2014' },
{ title : 'bar', content : "bar", likes : 2, date : '12/14/2014' },
{ title : 'baz', content : "baz", likes : 4, date : '12/23/2014' }
];
$scope.addArticle = function() {
if(!$scope.title || $scope.title === '') { return; }
$scope.articles.push(
{
title: $scope.title,
content: $scope.content,
likes: 0,
date: '12/15/2014',
comments: [
{ author: 'foo', comment: 'bar', upvotes: 0 }
]
}
);
$scope.title = '';
$scope.content = '';
}
$scope.likeArticle = function(article) {
article.likes += 1;
}
}]);
And here is my html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ibrahims Blog</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style> .glyphicon-heart { cursor:pointer } </style>
</head>
<body ng-app="ibrahimsBlog">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<form ng-submit="addArticle()" style="margin-top:30px;">
<h3>Create a new article!</h3>
<div class=form-group">
<input type="text"
placeholder="title"
ng-model="title">
</input>
</div>
<div class="form-group">
<input type="text"
placeholder="content"
ng-model="content">
</input>
</div>
<button type="submit" class="btn btn-primary">Hinzufügen</button>
</form>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Ibrahims Blog</h1>
</div>
<span>
Go
</span>
</script>
<script type=text/ng-template" id="/articles.html">
<div class="page-header">
<h3> {{ article.title }} </h3>
</div>
<div ng-repeat="article in articles">
<span class="glyphicon glyphicon-heart"
ng-click="likeArticle(article)"></span>
{{ article.title }} - "{{ article.content }}" - Likes: {{ article.likes }}, Date: {{ article.date }}
</div>
</script>
</div>
</div>
</body>
</html>
Unfortunately everything I receive is following part of the html
<form ng-submit="addArticle()" style="margin-top:30px;">
<h3>Create a new article!</h3>
<div class=form-group">
<input type="text"
placeholder="title"
ng-model="title">
</input>
</div>
<div class="form-group">
<input type="text"
placeholder="content"
ng-model="content">
</input>
</div>
<button type="submit" class="btn btn-primary">Hinzufügen</button>
</form>
Edit
Unfortunately there is still a part which is not working.. When I use the Go button, I see the change of the URL, but it then instant redirects me to the home template. On the server I get a 404 Error. Do you know why this is happening?
I think you have a semi-colon in the wrong place when defining the $stateProvider. You aren't chaining the .state calls properly because the first semi-colon terminates the statement:
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'PrimaryController'
}); // <-------------------------Remove this semi-colon!
.state('articles', {
url: '/articles/{id}',
templateUrl: '/articles.html',
controller: 'ArticlesController'
});
Like chubbsondubs stated, I had to remove a semicolon. But since that was just a cause for one problem here is the other fault I found later on. In my template in this line
<script type=text/ng-template" id="/articles.html">
The quotation marks were missing! That was the reason for the 404. It should be like this:
<script type="text/ng-template" id="/articles.html">
I have a form that is spread over multiple tabs. Originally, I used the tabset directive from ui-bootstrap, but then came the requirement to deep link to a specific tab, so I thought I'd use nested views from ui-router.
The problem I have is that the parent form is only valid when all the sub-forms are valid, but using ui-router states, only one sub-form is loaded at a time.
Here's an example to clarify
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="script.js"></script>
</head>
<body class="container-fluid">
<div ui-view>
<ul class="list-unstyled">
<li><a ui-sref="edit.basic">Basic</a></li>
<li><a ui-sref="edit.extended">Extended</a></li>
</ul>
</div>
</body>
</html>
script.js
angular.module('app', ['ui.router']).
config(function($stateProvider) {
$stateProvider.state('edit', {
abstract: true,
url: '/edit/',
templateUrl: 'edit.html',
controller: function($scope) {
$scope.model = {};
}
}).
state('edit.basic', {
url: '/basic',
templateUrl: 'basic.html'
}).
state('edit.extended', {
url: '/extended',
templateUrl: 'extended.html'
});
});
edit.html
<div class="row" ng-form="editForm">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li ui-sref-active="active">
<a ui-sref="edit.basic">Basic</a>
</li>
<li ui-sref-active="active">
<a ui-sref="edit.extended">Extended</a>
</li>
</ul>
</div>
<div class="col-xs-12" ui-view></div>
<div class="col-xs-12">
<button type="button" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
</div>
<div class="col-xs-12">
<hr>
<tt>model = {{model}}</tt><br>
<tt>editForm.$valid = {{editForm.$valid}}</tt><br>
<tt>editForm.basicForm.$valid = {{editForm.basicForm.$valid}}</tt><br>
<tt>editForm.extendedForm.$valid = {{editForm.extendedForm.$valid}}</tt>
</div>
</div>
basic.html
<div ng-form="basicForm">
<div class="form-group">
<label for="textProperty">Text Property</label>
<input type="text" class="form-control" name="textProperty" id="textProperty" ng-model="model.textProperty" required>
</div>
</div>
extended.html
<div ng-form="extendedForm">
<div class="form-group">
<label for="numericProperty">Numeric Property</label>
<input type="number" class="form-control" name="numericProperty" id="numericProperty" ng-model="model.numericProperty" required>
</div>
<div class="form-group">
<label for="dateProperty">Date Property</label>
<input type="date" class="form-control" name="dateProperty" id="dateProperty" ng-model="model.dateProperty" required>
</div>
</div>
I am beginning to believe that this approach is not suitable for my purpose. Instead of using nested views, I should continue to use the tabset and use a state parameter to activate the appropriate tab.
I'm interested to know how others would solve it.
UPDATE 1:
Here is one solution I came up with that uses the ui-bootstrap tabset but doesn't use nested ui-router states and instead parameterises the active tab.
UPDATE 2:
Here is a solution which uses nested states along with a validator service following the suggestion of Santiago Rebella
UPDATE 3:
Here is an alternate solution to update 2 which uses a validator object on the parent state's scope for comparison
You could try to do it in the way you state just passing to a service some kind of attributes like step1, step2, etc and go adding true or whatever your success value you may use, so once all those attributes are true, in your ng-disabled or the way you are building your form, is allowed to be submitted.
Maybe previous formsteps you could be storing the values of the inputs in an object in your service. I think in this way you could a multi-page form.
controller.js
var app = angular.module('employeeDemoApp');
app.controller('employeesCtrl', function($scope, $state, EmployeeService, $stateParams) {
console.log("Hello")
$scope.saveEmployee = function(formname){
console.log(formname.$error)
EmployeeService.saveEmployee($scope.user);
$state.go("employees");
}
$scope.employeeslist = EmployeeService.getEmployees();
if($stateParams && $stateParams.id){
$scope.user = EmployeeService.getEmployee($stateParams.id);
$scope.user.dob = new Date($scope.user.dob);
console.log("gdfg", $scope.user)
}
$scope.updateEmployee = function(req){
EmployeeService.updateEmployee($stateParams.id, $scope.user);
$state.go("employees")
}
$scope.goto_new_employee_page = function(){
$state.go("employees_new")
}
$scope.deleteEmployee = function(index){
console.log("fgdfhdh")
EmployeeService.deleteEmployee(index);
$scope.employeeslist = EmployeeService.getEmployees();
}
});