Is it possible to change the route (ui.router) when a user closes the form in a sidenav?
When I click on cancel, everything works fine and returns to the root URL. However, if I click anywhere on the page and close the sideNav, I remain on the /new URL.
I'm new to Angular and Angular-Material.
(function () {
"use strict";
angular
.module("ngClassifieds")
.controller('newClassifiedsCtrl', function ($mdSidenav, $state , $mdDialog, classifiedsFactory, $timeout, $scope){
var vm = this;
vm.closeSidebar = closeSidebar;
$timeout(function(){
$mdSidenav('left').open();
});
$scope.$watch('vm.sidenavOpen', function(sidenav){
if(sidenav === false){
$mdSidenav('left')
.close()
.then(function(){
$state.go('classifieds');
});
}
});
function closeSidebar() {
vm.sidenavOpen = false;
}
})
})();
In the template:
<md-sidenav class="md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-open="vm.sidenavOpen">
<md-toolbar>
<h1 class="md-toolbar-tools">Add a Classified</h1>
</md-toolbar>
<md-content layout-padding>
<form>
<md-input-container>
<label for="title">Title</label>
<input type="text"
id="title"
md-auto-focus
ng-model="classified.title">
</md-input-container>
<md-input-container>
<label for="price">Price</label>
<input type="text"
id="price"
ng-model="classified.price">
</md-input-container>
<md-input-container>
<label for="description">Description</label>
<textarea id="description"
ng-model="classified.description"></textarea>
</md-input-container>
<md-input-container>
<label for="image">Image Link</label>
<input type="text"
id="image"
ng-model="classified.image">
</md-input-container>
<md-button class="md-primary"
ng-click="vm.saveClassified(classified)"
ng-if="!editing">
Save
</md-button>
<md-button ng-if="editing"
class="md-primary"
ng-click="vm.saveEdit()">
Save Edit
</md-button>
<md-button class="md-warn" ng-click="vm.closeSidebar()">
Cancel
</md-button>
<pre>{{ classified | json }}</pre>
</form>
</md-content>