Question

我的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，因此我不希望清除页面的先前内容。

Answer 1

使用ng-view无法实现。您需要创建一个自己的指令并将其包含在index.html中：

<modal></modal>

Angular-ui有一个实现。也许你应该看一下。

修改

在过去，我已经制作了自己的模态（测试角度时）。我刚刚开始学习角度，所以它有很强的改进空间（现在阅读我会做的不同）。但是，它可以给你一个例子：

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>

Answer 2

ng-view不会帮助你。

相反，您应该将ng-include与ng-switch或ng-show合并。

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

或类似的东西。

在父控制器中，您需要阅读$routeParams，以便实施isOnSettingsUrl()。

Answer 3

ng-view使用来自routeProvider的内容直接更新自身，不仅有用，还可以提高性能，因为它会卸载您不会使用的控制器和观察者（您正在使用另一页）此外，网址中的更改应该更改视图，而不是附加任何内容。如果我直接进入该页面会发生什么？这肯定不会直观。

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

在您的情况下，我假设您要显示部分页面，用户可以在其中更新其设置您不需要使用routing进行此操作，您可以将设置部分放在play template内，并在部分使用ng-show。然后，您只需输入一个链接即可显示部分页面。

但是，如果你想要像groovehark这样的东西;那么你需要使用ng-view并路由到settings，然后你应该将播放模板（和它的控制器）放在ng-view之外，因为它会出现在每个页面中

在新视图中加载而不删除前一个视图

3 个答案: