在保留范围数据的同时切换同一控制器内的视图

Question

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

我尝试使用ui-router，但由于我的标记，我不能将过滤保持在父状态，根据我的问题：How do I show multiple views in an abstract state template?

我目前的标记是这样的：

<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>

数据数组在控制器内作为$scope.filteredApplications，在每个页面上，这是过滤并在每个指令中正常显示。

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

Answer 1

您可以将ng-if与指令一起使用，并根据范围变量设置值。

你的控制器会有类似的东西：

from bs4 import BeautifulSoup #imports beautifulSoup package
import urllib2

url2 = 'http://www.waldenu.edu/doctoral/phd-in-management/faculty'
page2 = urllib2.urlopen(url2)
soup2 = BeautifulSoup(page2.read(), "lxml")

row2 = soup2.findAll('p')
row2 = row2[18:-4] 

names2 = []
for x in row2:
    currentString2 = x.findAll('strong')
    if len(currentString2) > 0:
        currentString2 = currentString2[0]
        names2.append(currentString2.text)

然后你在HTML中有这个：

$scope.show = 'List'

然后，您可以在＆＃39; List＆＃39;之间切换$ scope.show的值。和地图＆＃39;基于某些事件。

Answer 2

如果我理解你的问题，解决方案非常接近。我们将从UI-Router原生设计中获益。这是一个完整的故事 （带有工作示例） ：

How do I share $scope data between states in angularjs ui-router?

因此，我们应该做的是正确使用视图数据继承 - 这适用于某些引用属性，例如：在父状态（根视图）上声明 Model : {}

controller('rootController', function ($scope) {
  $scope.Model = {SomeProperty : "xxx"}; // root controller creates it
})

我们可以（也可以）引入一些超级根状态，并轻松地将其注入每个州的超级家长

.state('root', {
  template: "<div ui-view></div>",
  controller: "rootController"
}

// any grand parent of some state hierarchy

.state("business", {
  parent: "root",
  ...
.state("athorization", {
  parent: "root"

以后任何控制器（因为我们从root未命名视图继承）都可以进行过滤

$scope.Model.Filter = {...}

任何其他控制器都可以使用该过滤器

$scope.filterPlanning = function() {
  var data = ...
  var filter = $scope.Model.Filter;
  // filter magic
  ...

  return filteredOutput;
}

类似的技术，包括TypeScript中的示例，可以在这里找到 （也有工作示例）

Angular Digest cycle being ran but ng-bind value not updating