1

私index.htmlは次のものを持っていますdiv

<div ng-view></div>

そして、私は自分のアプリを次のように宣言しています:

angular.module('app', [])
    .config(['$routeProvider', function($routeProvider){
            $routeProvider
                .when('/listen', {
                    templateUrl : 'partials/listen.html',
                    controller : PlaylistCtrl
                })
                .when('/settings', {
                    templateUrl : 'partials/settings.html',
                    controller : SettingsCtrl
                })
                .otherwise({
                    redirectTo : '/listen'
                })
        }
    ])
;

さて、ホームページ (つまり/#/listen) で へのリンクをクリックする/#/settingsと、ページの内容が の内容に置き換えられpartials/settings.htmlます。内容が置き換えられずに追加されるように変更するにはどうすればよいですか? 私の目標はsettings、モーダル ダイアログに表示されるようにすることなので、ページの以前のコンテンツが消去されることは望ましくありません。

4

3 に答える 3

1

ng-viewここでは役に立ちません。

代わりにng-includeor とng-switch組み合わせる必要がありますng-show。

<div><ng-include src="listen.html"/></div>
<div ng-show="isOnSettingsUrl()"><ng-include src="settings.html"/></div>

または、それらの線に沿った何か。

親コントローラーでは、$routeParamsを実装できるように を読み取る必要がありますisOnSettingsUrl()。

于 2012-12-31T11:15:05.450 に答える
1

それは ng-view では不可能です。独自のディレクティブを作成し、index.html に含める必要があります。

<modal></modal>

Angular-ui には実装があります。多分あなたはそれをチェックアウトする必要があります。

編集：

過去に私は独自のモーダルを作成しました（角度をテストするとき）。私はAngularの学習を始めたばかりなので、改善の余地がたくさんあります（今読んで、私は違うやり方をします）。ただし、例を示すことができます。

app.directive('modal', function($compile, $http) {
    return {
        restrict: 'E',
        replace: true,

        compile: function(elm, attrs) {
            var htmlText =
                '<div id="' + attrs.id + '" class="modal hide fade" aria-hidden="true">' +
                    '<div class="modal-header">' +
                        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                        '<p>&nbsp;</p>' +
                    '</div>' +
                    '<div class="modal-body">' +
                        '<div>to be replaced</div>' +
                    '</div>' +
                    '<div class="modal-footer">' +
                        '<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>' +
                    '</div>' +
                '</div>';
            elm.replaceWith(htmlText);

            return function postLink(scope, elm, attrs) {
                var modal = $('#' + attrs.id);
                modal.css({
                    width: '60%',
                    left: '20%',
                    margin: 'auto auto auto auto',
                    top: '10%'
                });
                var modalBody = modal.children('.modal-body');

                modalBody.css({
                    maxHeight: '800px'
                });

                var replaceDiv = modalBody.children();
                $http.get(attrs.src).success(function(data) {
                    var childScope = scope.$new();
                    childScope.modalMode = true;
                    var element = $compile(data)(childScope);
                    angular.element(replaceDiv).replaceWith(element);
                });
            };
        }
    };
});

HTML:

<a class="btn" data-target="#myId" data-toggle="modal" data-backdrop="static">Open modal</a>

<modal id="myId" src="path/to/partial" ></modal>
于 2012-12-30T22:32:41.210 に答える
0

ng-viewからのコンテンツで自分自身を直接更新します。routeProvider便利なだけでなく、使用しないコントローラーとウォッチャーをアンロードするため、パフォーマンスが向上します (別のページにいます)。
また、URLを変更すると、何も追加するのではなく、ビューを変更する必要があります。ページに直接アクセスするとどうなりますか? それは間違いなく直感的ではありません。

変化するページとなるindex.htmlレイアウトを含むページを持つことが期待されます。ng-viewその他の場合は、 を使用できますng-include。

あなたの場合、ユーザーが設定を更新できる部分的なページを表示したいと思います。
でこれを行う必要はありませんrouting。設定をパーシャル内で部分的にplay template使用ng-showし、パーシャルで使用できます。次に、部分ページを表示するためのリンクを配置するだけです。

ただし、grooveshark のようなものが必要な場合。ng-viewへのルーティングで使用する必要がある場合は、すべてのページに表示されると予想されるためsettings、プレイ テンプレート (およびそのコントローラー) を の外に配置する必要があります。ng-view

于 2012-12-31T07:16:59.107 に答える