In my AngularJS application, I have a form where users must input an application number. Upon successful entry, the corresponding data should be displayed below. This data can only be accessed through the scope if passed as a parameter to the current state. I am utilizing ui-router for routing.
While browsing discussions like Reloading current state - refresh data, I learned that passing data to the current state without refreshing the page is possible. However, despite implementing this solution, my content fails to show up. Additionally, I'm uncertain about the proper usage of ng-show and/or ng-if. Here is the function responsible for passing the data:
vm.findPatent = function(patentNo) {
searchPatentService.findPatent(patentNo)
.then(
function(data) {
$state.go('.', { patent: data }, {reload: false, notify: false, location: false})
})
},
function(errResponse) {
console.error('Error while finding patent');
}
);
}
The parameters within the state are defined as follows:
.state('search-patent', {
url: '/search-patent',
component: 'searchpatent',
params: {
navigation: 'patentnav',
patent: null
}
})
Below is the view with the form that triggers the display of content upon submission:
<form ng-submit="$ctrl.findPatent(searchPatent)" name="searchPatentForm">
<fieldset>
<div class="form-group row">
<label for="searchPatent">EP No.</label>
<div>
<input type="text" name="searchPatent" ng-model="searchPatent" class="form-control" placeholder="Search" required>
</div>
<div>
<button type="submit">Submit</button>
</div>
</div>
</fieldset>
</form>
<div class="row" ng-show="searchPatentForm.$submitted">
<div class="col-md-12">
//ANOTHER FORM AND CONTENT WHICH IS DISPLAYED ON SUBMIT
</div>
</div>
Query
I need assistance in passing data to the current state without causing a page refresh. Furthermore, any suggestions for improving the use of ng-show would be greatly appreciated. Thank you!