go back to before directive was used in angularJS

Question

I'm working on a project at the moment using angular JS. I've used a directive to switch from advanced search so that the results can be viewed on its own page. basically when submit is clicked, the advanced search is hidden and only results table can be seen. so now, once on results table, I want to be able to go back to that advanced search to the point before I hit that submit button, the data is still there, I have just reversed the directive in a way. any suggestions would be greatly appreciated, this is all fairly new to me. thanks! (please note, my search controller uses TypeScript)

this is being called just under the submit button on the search_partial.html

    <div class="submit">
                <button class="btn btn-primary" type="button" name="Submit" ng-click="vm.validateForm()" ng-disabled="!(!!vm.hospitalNumberInput || !!vm.nhsNumberInput || !!vm.fullNameInput || !!vm.sexInput || vm.yearOfBirthInput || !!vm.streetInput || !!vm.cityInput
                 || !!vm.postCodeInput || !!vm.chosenCountry)">Search</button>

                <a href="#" ng-click="vm.resetForm()">Clear all</a>
            </div>

        </form>
<section>
            <div id="searchDirective" search-results patients="vm.results" class="ng-hide"></div>
            </section>

and I have a directives file called search.results.directive.js

    (function () {

    angular
        .module('app.search.results')
        .directive('searchResults', function() {
            return {
                restrict: 'AE',
                templateUrl: 'app/search/Partials/result_partial.html',
                scope: {
                    patients: '='
                }
            };
        });
})();

so what I'm trying to do now that I can see the results-partial.html on the screen in front of me, I want to be able to click a back button on there to take me back to the search-partial.html at the point before the user clicked that submit button so that the data in the boxes can be altered if needs be or more search data added. (at the moment I have a back href going to the home url, it works for now, but that's what im hoping to replace). results-partial.html:

<main class="container">
    <!-- RESULT -->
    <section class="result-display">
        <form>
            <div class="searchresults content table-responsive">
                <h2>Search Criteria: </h2>


                <h2> Search Results: {{patients.length}} patients found</h2>
                <table class="table resultstable table-striped">
                    <thead>
                        <tr class="theading">
                            <th>Hospital number</th>
                            <th>NHS Number</th>
                            <th>Full Name</th>
                            <th>DOB</th>
                            <th>Sex</th>
                        </tr>
                    </thead>
                    <!--repeated simply for style insight-->
                    <tbody>
                        <tr ng-repeat="patient in patients">
                            <td>{{patient.resource.hospitalNumber}}</td>
                            <td>{{patient.resource.nhsNumber}}</td>
                            <td>{{patient.resource.nameString}}</td>
                            <td>{{patient.resource.birthDate}}</td>
                            <td>{{patient.resource.gender.toUpperCase()}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
<a href style="float: right; font-size:120%;" onclick="location.href='http://localhost:3000/';"><i class="close"></i><u>Back to Search</u></a>
        </form>
    </section>
</main>

Answer 1

fixed it. managed to get it working my changing the flag to false with "returnToSearch()" function at the bottom.

createDisplayParams(): void {

        // add in search params to display params
        var paramTypes: string[] = [];

        for (var i: number = 0; i < this.searchParams.length; ++i) {
            var objectIndex: number = paramTypes.indexOf(this.searchParams[i].ParamName);
            if (objectIndex === -1) {
                // if param name dosen't exist, add it to the paramTypes
                paramTypes.push(this.searchParams[i].ParamName);
            }
        }

        for (var j: number = 0; j < paramTypes.length; ++j) {
            var valueParams: core.ISearchParam[] = [];
            valueParams =_.filter(this.searchParams, searchParam => { //lodash
                return searchParam.ParamName == paramTypes[j];
            });

            var valueStrings: string[] = [];
            valueParams.forEach(v => valueStrings.push(v.ParamValue));

            this.displayParams.push({ paramType: paramTypes[j], paramValue: valueStrings.join(", ") });
        }

    }

    obtainPatientInformation(): void {
        this.createSearchParams();

        if (this.searchParams.length > 0) {
            var rawResults: angular.IPromise<core.IPatient> = this.searchDataService.performAdvancedSearch(this.searchParams);
            var searchControllerInstance: SearchController = this;
            this.createDisplayParams();
            rawResults.then(
                function success(response: any): void {
                    if (response.data.entry && response.data.entry.length > 0) {
                        searchControllerInstance.noResults = false;
                        searchControllerInstance.results = response.data.entry;

                        for (var index: number = 0; index < searchControllerInstance.results.length; index++) {
                            var patient: core.IEntry = searchControllerInstance.results[index];
                            patient.resource.nameString = '';

                            if (patient.resource.name) {
                                var familyNameArray: string[] = patient.resource.name[0].family;
                                for (var familyIndex: number = 0; familyIndex < familyNameArray.length; familyIndex++) {
                                    var familyName: string = familyNameArray[familyIndex];
                                    patient.resource.nameString = patient.resource.nameString + ' ' + familyName.toUpperCase() + ',';
                                }

                                var givenNameArray: string[] = patient.resource.name[0].given;
                                for (var givenIndex: number = 0; givenIndex < givenNameArray.length; givenIndex++) {
                                    var givenName: string = givenNameArray[givenIndex];
                                    patient.resource.nameString = patient.resource.nameString + ' ' + givenName;
                                }
                            }
                            var identifiers: core.IIdentifier[] = patient.resource.identifier;
                            for (var indentifierIndex: number = 0; indentifierIndex < identifiers.length; indentifierIndex++) {
                                var identifier: core.IIdentifier = identifiers[indentifierIndex];

                                if (identifier.system) {
                                    if (identifier.system === 'nhsNumber') {
                                        patient.resource.nhsNumber = identifier.value;
                                    }
                                    if (identifier.system === 'hospitalNumber') {
                                        patient.resource.hospitalNumber = identifier.value;
                                    }
                                }
                            }
                        }
                    } else {
                        searchControllerInstance.noResults = true;
                        searchControllerInstance.results = null;
                    }
                });
        }

        this.searchClicked = true;
        this.checkSearch();
    }

    checkSearch(): void {
        var resultSectionElements: angular.IAugmentedJQuery = angular.element('[id*="resultSection"]');
        var advanceSearchSectionElements: angular.IAugmentedJQuery = angular.element('[id*="advanceSearchSection"]');
        if (this.searchClicked) {
            resultSectionElements.removeClass('ng-hide');
            advanceSearchSectionElements.removeClass('ng-show');
            advanceSearchSectionElements.addClass('ng-hide');
        } else {
            resultSectionElements.addClass('ng-hide');
            advanceSearchSectionElements.removeClass('ng-hide');
            advanceSearchSectionElements.addClass('ng-show');
        }
    }

    returnToSearch(): void {
        this.searchClicked = false;
        this.searchParams.splice(0,this.searchParams.length);
        this.displayParams.splice(0,this.displayParams.length);
        this.checkSearch();
    }

Answer 2

If I understand the question right, you want to preserve the values in the input.

You can use a factory or value to store the data.

myApp.factory('DataHolder', function (){
 return data;
});

// Or, with value
myApp.value('DataHolder', data);

And in your controller you can access that data anywhere.

myApp.controller('Ctrl', function ($scope, DataHolder){
  $scope.data = DataHolder;
});

So when you come back to the back state, if you have data stored you can get it back to show it.