1

In my AngularJS App, I have a form in which the user needs to enter an application number, and if successful, display content below which displays appropriate data. This data I can only access through the scope if I pass it as a parameter to the current state. I am using ui-router for routing.

I have read threads such as Reloading current state - refresh data which has advised me that I can pass data to the current state and not refresh the page but it keeps refreshing and the content doesn't show. I am also not sure whether I am using ng-show and/or ng-if correctly. My function to pass the data is as follows:

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');
        }
    );
}

And my parameters within the state:

.state('search-patent', {
    url: '/search-patent',
    component: 'searchpatent',
    params: {
        navigation: 'patentnav',
        patent: null
    }
})

And my view with the form which displays the content below on form submit:

<form ng-submit="$ctrl.findPatent(searchPatent)" name="searchPatentForm">
    <fieldset>
        <div class="form-group row">
            <labelfor="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>

Question

How do I pass the data to the current state without refreshing the page? Also, is there a better solution to using ng-show? Thanks

Patrick McDermott
  • 1,220
  • 1
  • 15
  • 30
  • still not clear whats your goal ? you want to refresh page onClick ??and show some data ?? – Abdullah Al Noman Sep 12 '17 at 08:54
  • Why you are not willing to use $scope ?? – Abdullah Al Noman Sep 12 '17 at 08:55
  • Apologies. So on submit, I need to pass parameters to the current state and remaind on the current state and page, so I can display the necessary object properties, in the container that displays (through ng-show) on submit. The issue I have is that it the parameters are passed but the page refreshes and the containe that is meant to show, flashes for a second and then disappears – Patrick McDermott Sep 12 '17 at 08:56
  • I do, I use `vm` instead and `$ctrl` in the view, but if you have an example that could help me, it would be greatly appreciated – Patrick McDermott Sep 12 '17 at 08:57
  • See my answer this should work @Patrick – Abdullah Al Noman Sep 12 '17 at 09:05

1 Answers1

2

Since you want to remain on the page after you have submitted .

$scope.result= null;
vm.findPatent = function(patentNo) {
    searchPatentService.findPatent(patentNo)
    .then(
        function(data) {
            $scope.result=data;
            })
        },
        function(errResponse) {
            console.error('Error while finding patent');
        }
    );
}

In your view you should use ng-if if you want your div to be recreated else use ng-show see details here

<div class="row" ng-if="result">
    <div class="col-md-12">
      {{result}}
    </div>
</div>

For detailed example see here

Abdullah Al Noman
  • 2,817
  • 4
  • 20
  • 35