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

Question

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

我曾尝试使用 ui-router，但由于我的标记，我无法将过滤保留在父状态中，根据我在此处的问题：

我当前的标记是这样的：

<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 与您的指令一起使用，并根据范围变量设置值。

你的控制器应该是这样的：

$scope.show = 'List'

然后你的 HTML:

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

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

然后您将根据某些事件在 'List' 和 'Map' 之间切换 $scope.show 的值。

Answer 2

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

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"

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

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

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

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

  return filteredOutput;
}

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

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

Switching views within the same controller whilst retaining scope data

scope

nested

angularjs

angularjs-scope

angular-ui-router

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