6

私は Angular.js にまったく慣れていないので、問題を解決する方法がわかりません。

アプリは、トップレベルのルートでもある 3 つのメイン タブで構成されています。

#/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 はスレッドが選択されるたびにビュー全体を再レンダリングし、スレッド リスト (右側) も再レンダリングしてスクロール位置を失います。

スレッドが選択されるたびにスレッドリストが再レンダリングされないようにしたいのですが、これを達成するためにルート/テンプレートを整理する方法がわかりません。

どんな提案でも大歓迎です！

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 に答える