0

我有一个 11 页的 Angular 应用程序。其中一些有一个使用此代码的导航：

<div class="well sidebar-nav" ng-app="navList">
    <ul class="nav nav-list" ng-controller="navCtrl">
        <li ng-class="navClass('home')"><a href='#/home'>Home</a></li>
        <li ng-class="navClass('about')"><a href='#/about'>About Us</a></li>
        <li ng-class="navClass('contact')"><a href='#/contact'>Contact Us</a></li>
    </ul>
</div>

var navList = angular.module('navList', []);

navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };        
}]);

我不想在所有页面上都有这个导航。处理这种情况的最佳解决方案是什么？我应该显示隐藏 DOM 元素还是需要在不需要时将其删除？

4

1 回答 1

1

这完全取决于你。正如@Chandermani 所说，如果你的 DOM 很小，隐藏它是没有问题的。这就是大多数具有流畅布局的 Web 应用程序的工作方式。考虑到导航的大小，这真的不会造成太大问题。

如果您确实想完全删除它（这也很好），您可以使用ng-switch指令获得角度来执行此操作。在包含您发布的代码的外部元素上，添加开关，然后在上面的well类元素上，添加条件，例如，您可能有

<div class="wrapper" ng-switch="smallScreen" ng-app="navList">
    <div class="well sidebar-nav" ng-switch-when="true">
        <ul class="nav nav-list" ng-controller="navCtrl">
            <li ng-class="navClass('home')"><a href='#/home'>Home</a></li>
            <li ng-class="navClass('about')"><a href='#/about'>About Us</a></li>
            <li ng-class="navClass('contact')"><a href='#/contact'>Contact Us</a></li>
        </ul>
    </div>
</div>

然后在您的控制器中，您将需要一个名为的范围变量smallScreen，根据您是否要查看它，您将其设置为 true 或 false。

另一方面，将ng-app指令附加到菜单是不寻常的，或者这只是为了演示？

于 2013-06-17T16:09:55.577 回答