6

我对 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 都会重新渲染整个视图，这也会导致线程列表（右侧）重新渲染并松开其滚动位置。

I would like to keep the thread-list from re-render whenever a thread is selected and I can't seem to figure out how to organize my routes/templates in order to achieve this.

任何建议将不胜感激！

4

2 回答 2

5

请检查这个问题，我相信你的问题是完全一样的。

如果您更改 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/

于 2013-01-28T00:16:11.810 回答
2

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

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

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

于 2013-01-28T13:01:53.663 回答