8

我的问题的简短版本是：如何在不需要触发路由更改或不需要在当前显示的页面上运行所有控制器的情况下更改 URL？

细节：

我有一个显示在其中的模板，该模板<ng-view>具有由 3 个控制器管理的区域。在页面的最顶部，我有一个交互式地图。当您单击区域时，它会广播一次单击，其他组件会接收并显示有关该区域的数据。非常简单的设置。

我想做的是允许我的用户深度链接到内容。因此，每次有人单击链接时，我都想更改可以复制并粘贴到另一个浏览器的 URL。其他一些用户只需单击链接并看到第一个看到的相同状态。

目前我使用与此类似的代码更改位置：

  $scope.$on('mapRegionClick', function($scope, regionCode) {
    var url = generateURL(regionCode);

    $scope.currentScope.$apply(function(){
      $location.path(url);
    });});

然后在我的路由中提取 URL，并且地图和数据正确显示。这样做的缺点是每次我点击地图和 URL 更改时，都会重新生成整个模板/视图。因为生成地图有点繁重，所以我只想触发对数据呈现控制器的更改。

是否可以？如何？

我可以在控制器之间进行一些通信并实现我的目标，但是我将无法进行深度链接。

PS：我不想用$location.search()and reloadOnSearch=false。我的链接必须很漂亮:)

4

2 回答 2

9

听起来你不想使用$route服务。

该$route服务旨在重新加载控制器，以便导航到 URL 和刷新 URL 之间没有区别。我们通过对每个 URL 更改进行完全重新加载来做到这一点。这是故意的。

听起来像您的用例，不应该使用$route, 只是$locationand ng-include。

于 2013-01-26T07:54:42.167 回答
0

您可以使用$locationChangeStart事件将先前的值存储在服务中$rootScope或服务中。当您回来时，只需从 $rootScope 初始化所有先前存储的值。使用 . 查看这个快速演示$rootScope。

在此处输入图像描述

var app = angular.module("myApp", ["ngRoute"]);
app.controller("tab1Ctrl", function($scope, $rootScope) {
    if ($rootScope.savedScopes) {
        for (key in $rootScope.savedScopes) {
            $scope[key] = $rootScope.savedScopes[key];
        }
    }
    $scope.$on('$locationChangeStart', function(event, next, current) {
        $rootScope.savedScopes = {
            name: $scope.name,
            age: $scope.age
        };
    });
});
app.controller("tab2Ctrl", function($scope) {
    $scope.language = "English";
});
app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            template: "<h2>Tab1 content</h2>Name: <input ng-model='name'/><br/><br/>Age: <input type='number' ng-model='age' /><h4 style='color: red'>Fill the details and click on Tab2</h4>",
            controller: "tab1Ctrl"
        })
        .when("/tab2", {
            template: "<h2>Tab2 content</h2> My language: {{language}}<h4 style='color: red'>Now go back to Tab1</h4>",
            controller: "tab2Ctrl"
        });
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
    <a href="#/!">Tab1</a>
    <a href="#!tab2">Tab2</a>
    <div ng-view></div>
</body>
</html>

于 2018-07-07T11:04:24.437 回答