在同一控制器内切换视图，同时保留范围数据 [英] Switching views within the same controller whilst retaining scope data

问题描述

我有一页数据，可以作为列表或地图上的标记查看.它在侧边栏中也有过滤功能.我目前将此结构为单独的地图和列表页面，但我想合并它们，以便在切换视图时保留过滤器.

我曾尝试使用 ui-router 但由于我的标记，我无法将过滤保持在父状态，根据我的问题:如何在抽象状态模板中显示多个视图?

我目前的标记是这样的:

<main class="page-content"><!-- 在地图和列表视图之间切换--><a href="/map">查看地图</a><!-- 此处查看主要内容--><appl-list></appl-list><!-- <appl-map></appl-map>--></main><aside class="sidebar"><div 精炼结果信息="refine" id="SearchForm" class="refine-search"></div></一边>

数据数组作为 $scope.filteredApplications 位于控制器内，并且在每个页面上，这在每个指令中都可以很好地过滤和显示.

我想我的问题是:如何在两个 <appl-*> 指令之间切换并显示相同的过滤记录?

解决方案

您可以在指令中使用 ng-if 并根据作用域变量设置值.

您的控制器将具有以下内容:

$scope.show = '列表'

然后你会在你的 HTML 中有这个:

 <appl-list ng-if="show==='List'></appl-list><appl-map ng-if="show==='Map'></appl-map>

然后，您将根据某个事件在列表"和地图"之间切换 $scope.show 的值.

I have a page of data that can be viewed as a list or as markers on a map. It also has filtering in the sidebar. I currently have this structured as separate map and list pages but I want to merge them so that the filters remain when switching views.

I have tried using ui-router but due to my markup I cannot keep the filtering within a parent state, as per my question here: How do I show multiple views in an abstract state template?

My current markup is like this:

<div class="main-container" ng-controller="PlanningCtrl" data-county-parish-id="1478">
    <main class="page-content">
        <!-- toggles between map and list views -->
        <a href="/map">View map</a>

        <!-- main content view here -->
        <appl-list></appl-list>

        <!-- <appl-map></appl-map> -->
    </main>
    <aside class="sidebar">
        <div refine-results info="refine" id="SearchForm" class="refine-search"></div>
    </aside>
</div>

The data array is within the controller as $scope.filteredApplications and on each page this is filtering and displaying fine within each directive.

I guess my question is: how can I toggle between the two <appl-*> directives and display the same filtered records?

解决方案

You can use ng-if with your directives and set value based on a scope variable.

Your controller would have something like:

$scope.show = 'List'

Then you'd have this in your HTML:

    <appl-list ng-if="show==='List'></appl-list>

    <appl-map ng-if="show==='Map'></appl-map>

Then you'd toggle the value of $scope.show between 'List' and 'Map' based on some event.

这篇关于在同一控制器内切换视图，同时保留范围数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！