Question

我对Angular.js很陌生，我似乎无法弄清楚如何解决我的问题。

应用包含三个主要标签，也就是顶级路线，即

#/home
#/inbox
#/products

当前的路由配置看起来像这样（coffeescript）：

$routeProvider.
  when('/home', templateUrl: 'home.html').
  when('/inbox', templateUrl: 'inbox.html').
  when('/inbox/:thread_id', templateUrl: 'inbox.html', controller: 'MessagesCtrl').
  otherwise(redirectTo: '/inbox')

现在，问题是收件箱视图。

收件箱视图（inbox.html）是一个拆分列模板，左侧是消息线程列表，右侧是所选线程的消息：

 --------------------------
| Navigation               |
 --------------------------
|         |                |
| Threads |    Messages    |
|         |                |
|         |                |

无论是否选择了某个帖子，所有#/inbox路由的线程列表都应该是可见的。

正如您从路径中看到的那样，收件箱视图是一个单独的模板（inbox.html），在选择线程时和不选择线程时都会加载。这使得Angular每次选择一个线程时都会重新渲染整个视图，这也会导致线程列表（向右）重新渲染并松开其滚动位置。

我想保持线程列表不会在选择线程时重新呈现，我似乎无法弄清楚如何组织我的路由/模板以实现此目的。

任何建议都将不胜感激！

Answer 1

请检查此issue，我相信您的问题完全相同。

如果更改了URL路径，ng-view内的所有内容都将重新呈现，并且无法避免这种情况。但是，如果您在路由配置上将reloadOnSearch设置为 false ，然后使用/inbox?id=1等链接，则不会重新呈现ng-view。这可能是您问题的最佳解决方案，您可以使用深层链接并避免重新渲染。

关于reloadOnSearch属性，angularjs documentation声明：

[reloadOnSearch = true] - {boolean =} - 仅在重新加载路线时   $ location.search（）更改。

如果该选项设置为false并且浏览器中的url更改，则   $ routeUpdate事件在根范围内广播。

您只需要监听$routeUpdate事件即可更新收件箱控制器内的信息，如下所示：

app.controller('InboxCtrl', function($scope, $routeParams) {      
    $scope.$on('$routeUpdate', function(value) {
        // update the model/$scope here based on the $routeParams info...
    });    
});

jsFiddle 示例：http://jsfiddle.net/bmleite/ZB56n/

Answer 2

感谢您的建议。但是，我能够使用这种技术解决它：

http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm https://github.com/bennadel/AngularJS-Routing

实施起来有点复杂，但对于我的情况，我认为最终是值得的

AngularJS - 使用子路径进行模板化

2 个答案: