问题描述
我有一页数据,可以作为列表或地图上的标记查看.它在侧边栏中也有过滤功能.我目前将此结构为单独的地图和列表页面,但我想合并它们,以便在切换视图时保留过滤器.
我曾尝试使用 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.
这篇关于在同一控制器内切换视图,同时保留范围数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!