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 是不可能的。您需要创建一个自己的指令并将其包含在您的 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 回答
1

ng-view不会在这里帮助你。

相反，您应该ng-include与ng-switchor结合使用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 回答
0

ng-view使用来自 的内容直接更新自身routeProvider，不仅有用，而且还提高了性能，因为它卸载了您不会使用的控制器和观察者（您在不同的页面上）。
url 的更改也应该更改视图，而不是附加任何内容。如果我直接进入页面会发生什么？这绝对不是直观的。

预计会有一个index.html包含布局的页面，ng-view这将是更改页面。对于其他事情，您可以使用ng-include.

在您的情况下，我假设您想要显示部分页面，用户可以在其中更新他们的设置。
您不需要使用routing，您可以在部分中设置部分play template并在部分中使用ng-show。然后，您只需放置一个链接即可显示部分页面。

但是，如果您想要grooveshark之​​类的东西；那么您确实需要使用ng-viewwith routing to settings，然后您应该将播放模板（及其控制器）放在ng-view您希望它显示在每个页面中的外部。

于 2012-12-31T07:16:59.107 回答