回到 angularJS 中使用指令之前

Question

我目前正在使用 angular JS 开发一个项目。我使用指令从高级搜索切换，以便可以在其自己的页面上查看结果。基本上当点击提交时，高级搜索被隐藏，只能看到结果table。所以现在，一旦出现结果 table，我希望能够返回到高级搜索，直到我点击提交按钮之前的那个点，数据仍然存在，我只是以某种方式颠倒了指令。任何建议将不胜感激，这对我来说都是相当新的。谢谢！（请注意，我的搜索控制器使用 TypeScript）

这是在 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>

我有一个名为 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: '='
                }
            };
        });
})();

所以我现在正在尝试做的是我可以在我面前的屏幕上看到结果-partial.html，我希望能够点击那里的后退按钮让我返回在用户单击该提交按钮之前的那一点搜索-partial.html，以便在需要时可以更改框中的数据或添加更多搜索数据。（目前我有一个返回 href 到家 url，它现在可以工作，但这正是我希望替换的）。结果-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

如果我理解正确，你想保留输入中的值。

您可以使用工厂或值来存储数据。

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

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

并且在您的控制器中，您可以在任何地方访问该数据。

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

因此，当您回到后台状态时，如果您存储了数据，您可以将其取回以显示它。

Answer 2

已修复。通过在底部使用 "returnToSearch()" 函数将标志更改为 false，设法使其正常工作。

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

回到 angularJS 中使用指令之前

go back to before directive was used in angularJS

javascript

html

angularjs

angularjs-directive

back