防止 Angularjs 在路由更改时呈现模板答案

【问题标题】：Prevent Angularjs to render template on route change防止 Angularjs 在路由更改时呈现模板
【发布时间】：2013-10-31 11:57:36
【问题描述】：

我正在使用角度路线进行应用导航，并使用 ng-view 在路线更改时呈现模板。

但在某些情况下，我想调用我的另一个控制器并在单独的 ng-include 中呈现模板（因为我们不使用多个 ng-view 而我不使用'不想使用 ui-route)。

在执行此操作时，我不希望现有视图发生变化，但需要更改路线。

更新：举例说明我实际需要什么-
假设我正在使用 xyz 模板和控制器 ctrl 的路线 abc。
然后进行一些搜索并填充一些数据。
单击链接后（在模板 xyz 中），我需要使用模板 xyz1 将路线更改为 abc1（如叠加），但必须重新所有以前的视图（即 xyz 模板和填充的数据）。

谢谢

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以在路由中添加其他参数，然后可以将其作为路由参数访问。您还可以对多个视图使用相同的模板。

您可以将其结合起来做您想做的事（假设我理解正确）。将两条路由指向同一个页面，并为第二条路由提供一个额外的变量，您可以使用它来显示额外的内容（通过 ng-include）。您在路由中设置的变量可以是模板 url，然后您可以在 ng-include 语句中使用它。

一个例子：

  .when('/mypage', {
    templateUrl: 'mypage.html'
  })
  .when('/myotherpage', {
    templateUrl: 'mypage.html',
    to_be_inclyded: 'myotherpage.html'
  })

编辑：你也可以在一个页面上有多个控制器（即使你直接在路由中设置了一个控制器）。因此，您可以像这样为包含的内容设置一个单独的控制器。

<div ng-controller="MyController">
  <!-- Page content of the original view goes here. -->
  <!-- Note that you could have specified this controller in the route instead. -->
  ...
  ...
  ...

  <!-- Here we put the include, and we can simply give it a new controller -->
  <div ng-include="{{to_be_included}}" ng-controller="MyOtherController"></div>
</div>

事实上，您几乎应该一直这样做。没有理由尝试将包含多个部分的整个页面塞进一个控制器中。而是为每个部分/功能提供自己的控制器，这将使您的代码更简单，更容易遵循。

再次编辑：为了完整起见，我将保留上述内容，但对于您提供的示例，我认为我更清楚地看到了问题。最大的问题不是您需要加载相同的视图，而是当路由更改时控制器将重新加载并且您会丢失所做的所有更改。因此，用户在视图中执行的任何搜索或其他操作都将被清除。

在更改 url 时，默认的 $route 将始终（并且按照设计）重新加载控制器。要做你想做的事，我会查看 UI-router 项目 (https://github.com/angular-ui/ui-router)。它是使用默认 $route 的替代方法，它使您可以更好地控制确切的行为。我还没有尝试过，所以我不知道是否支持这个确切的用例，但它看起来很有希望。

如果您不想这样做或者它不起作用（我没有尝试使用它），那么您也许可以解决这个问题。我知道另外两种方法。

使用 get-parameters 而不是更改 url。不是从 /mypage 到 /myotherpage，而是从 /mypage 到 /mypage?foo=bar。有一个名为 reloadOnSearch 的设置可防止在执行此操作时重新加载路由，因此如果您对不那么漂亮的 url 没问题，那么您可以使用它。
接受重新加载但保存路由之间的数据。您可以将数据存储在服务 (Angularjs, passing scope between routes) 中，并且每次基本控制器运行时，它都可以导入该数据，从而在路由之间保持其状态。这不像根本不重新加载那样干净，并且可能会导致您的视图出现一些闪烁（您必须尝试），但它很容易做到。

【讨论】：

此答案假定您尝试根据路线仅更改页面的一部分，而其余部分保持不变。
在我的情况下，另一个控制器已经附加到第一个模板，我需要将另一个控制器附加到第二个模板（我需要使用 ng-include 加载）。
你可以嵌套 ng-controller，所以你可以给你的 include 自己的控制器。我用一个例子更新了答案。这是关于你想要做的事情吗？
埃里克感谢您的回答。我已经更新了我的问题。请看一看。
啊，所以问题之一是你在改变路线时丢失了数据？您希望 xyz 模板和示例中的 ctr 不会丢失您所做的搜索？我会更新我的答案。

【解决方案2】：

将您的视图绑定到控制器中的作用域变量...这为您提供了比ng-view 更大的灵活性，并且基本上充当拦截器。

这样，你可以监听：

$scope.$on('$routeUpdate', function(event, route){
  if(condition){
    $scope.template = 'mytemplate.html';
  }
});

并围绕您的视图包装逻辑来决定哪一个符合您的条件。

<div ng-include="'template'"></div>

【讨论】：