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

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

请检查此问题,我相信您的问题完全相同.

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

关于reloadOnSearch属性,angularjs 文档说明:

[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

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