javascript - 回到在 angularJS 中使用指令之前

Question

我目前正在使用 Angular JS 开发一个项目。我使用指令从高级搜索切换，以便可以在其自己的页面上查看结果。基本上当点击提交时，高级搜索被隐藏，只能看到结果表。所以现在，一旦出现在结果表上，我希望能够返回到高级搜索，直到我点击提交按钮之前的那个点，数据仍然存在，我只是以某种方式颠倒了指令。任何建议将不胜感激，这对我来说都是相当新的。谢谢! (请注意，我的搜索 Controller 使用 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: '='
                }
            };
        });
})();

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

在您的 Controller 中，您可以在任何地方访问该数据。

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

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