在AngularJS路由中更改路径而不重新加载控制器和模板

Question

大家好，我希望你们都是AngularJS的开发者。我已经按照ng文档（链接）进行了操作。我搜索了很多次，但是没有找到合适的解决方案。我需要在不重新加载控制器和模板的情况下更改路由。我写了一个如下所示的路由：

             $routeProvider
             .when('/page1', {
                 templateUrl: 'page1',
                 controller: 'page1Ctrl',
                 caseInsensitiveMatch: true,
                 reloadOnSearch: false
             })
             .when('/page2', {
                 templateUrl: 'page2',
                 controller: 'page2Ctrl',
                 caseInsensitiveMatch: true,
                 reloadOnSearch: false
             })
            .when('/page3', {
                templateUrl: 'page3',
                controller: 'page3Ctrl',
                caseInsensitiveMatch: true,
                reloadOnSearch: false
            }).otherwise({ redirectTo: '/index' });

此外，我一开始进入页面1，然后进入页面2和页面3，现在我想返回页面1，而不重新加载或调用页面1控制器和模板。例如：假设当我在页面1时，我选择了一个ng-grid记录，它的分页大小为3，并输入了一些字段。之后我进入了页面3，然后再次返回页面1。现在这次，我想看到我选中的ng-grid记录和我输入的内容。我该如何解决呢？谢谢。

- Shohel

Answer 1

为了在离开控制器并再次返回时保留数据，建议使用服务的Angular方法。请参阅此NG-Conf演讲：https://www.youtube.com/watch?v=62RvRQuMVyg。

例如，在离开page1Ctrl并返回时保留输入字段和分页索引，您可以创建一个pagingModelService。

function PagingModelService($rootScope)
{
   var pagingModelService = {};

   ////////////////////
   // persisted data //
   ////////////////////
   pagingModelService.pagingIndex;
   pagingModelService.field1;
   pagingModelService.field2;

   ////////
   //Init//
   ////////
   return(pagingModelService);

}

然后在控制器中注入服务，并将$scope值设置为该服务：

function Page1Ctrl($scope, pagingModelServiceModel)
{
   ///////////////////////////////////////////////////
   //set local $scope variables to persisted service//
   ///////////////////////////////////////////////////
   $scope.pageIndex = pagingModelService.pagingIndex;
   $scope.field1 = pagingModelService.field1;
   $scope.field2 = pagingModelService.field2;
}

此外，您可以查看angular-local-storage以保留数据：https://github.com/grevory/angular-local-storage

- Scott Rice

---

感谢您提供的好概念，@Scott Rice。但是我想通过路由来管理，而不需要创建服务或工厂。 - Shohel

Answer 2

我想建议使用Angular Ui.router

这样你就可以更改路由的状态，更多信息请查看文档

- Narek Mamikonyan

---

谢谢 @Narek Mamikonyan。我会尝试这个方法。但是你有这种类型工作的示例吗？ - Shohel

如果您查看文档，我认为您会找到它的 :) - Narek Mamikonyan

好的 @Narek Mamikonyan。 - Shohel

嗨，@Narek Mamikonyan，我没有看到任何可以帮助我的信息。 - Shohel

有一个“绝对路径(^)”。这个绝对路径不起作用。 - Shohel