4

メイン ビューの上にモーダル ウィンドウとして表示される詳細ビューを持つアプリを作成しています。それぞれにURLがありますが、URLから直接詳細ビューにアクセスする場合はメインビューとして表示したいです。この比喩は多くのアプリで使用されていますが、ピンタレストのピンは典型的な例です (ピンをクリックしてからページをリロードして違いを確認してください)。

私が収集したものから、通常のルーターはこれを処理するのに十分強力ではないため、ng-view を置き換える独自のディレクティブを作成しました。簡略化されたコード サンプルを次に示します。

app.directive('myModalView', ['$route', function($route) {
  return {
    link: function(scope, elem, attr) {
      var data = { modal: false };
      var first = true;
      scope.data = data;

      scope.$on('$routeChangeSuccess', function() {
        var current = $route.current.$$route;
        var template = current.templateUrl;

        data.modal = current.modal && !first;
        data.modal ? data.modalTemplate = template : data.mainTemplate = template;  

        first = false;
      });
    },
    template: '<div ng-include src="data.mainTemplate"></div>' +
              '<div ng-show="data.modal" ng-include src="data.modalTemplate"></div>',
  };
}]);

2 つの質問:

  • これは正しいアプローチですか？これを行うためのより「角度のある」方法はありますか?
  • 上記のコードには重要な問題があります。2 つの URL が同じテンプレートを使用している場合、ng-include が更新されません。状況によっては、コントローラーが初期化時に URL パラメーターをチェックし、さまざまなデータをビューに提供しています。ng-include をリフレッシュしたり、コントローラーを再初期化したり、この状況を処理するために何か他のことを行う方法はありますか?

ありがとう！

4

1 に答える 1

0

UI-Routerプロジェクトのチェックアウトに興味があるかもしれません。このプロジェクトは、ng-view を複数のネストされたまたは並列の ui-view 要素に置き換えることを目的としています。

于 2013-06-14T02:22:58.550 に答える