Question

解决

晚安，

我在使用ng-if从angular隐藏导航侧边栏时遇到了问题。我在$ route上声明了activetab，但它仍然没有用。这是代码。

HTML：

<header ng-if="$route.current.activetab !== 'login'">
<div class="col s3">
    <ul id="nav-mobile" class="side-nav fixed">
        <li class="logo">
            <a href="#" id="logo-container" class="brand-logo">BRAND LOGO</a>
        </li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>

app.js上的

$ route config：

experimentApp.config(['$routeProvider', '$locationProvider', '$httpProvider',
function($routeProvider, $locationProvider, $httpProvider) {
    var baseTitle = 'Experiment';

    $routeProvider.when('/', {
        title: baseTitle + ' - Home',
        templateUrl: 'partials/home.php',
        activetab: 'home'
    }).when('/login', {
        title: baseTitle + ' - Login',
        templateUrl: 'partials/login.php',
        activetab: 'login',
        controller: 'LoginController'
    });

}]);

答案：

我创建了一个名为navigation的新控制器，对html进行分区并在根控制器上放置一些代码。

导航控制器：

experimentApp.controller('navigation',
['$scope', '$location', '$route', function($scope, $location, $route) {
    $scope.navigation = function() {
        if (!$scope.active('/login')) {
            return 'partials/navigation.php';
        }
    }
}]);

根控制器上的

$ scope.active：

$scope.active = function(path) {
        return $location.path().match(new RegExp(path + '.*', 'i')) != null;
    }

HTML：

<header ng-controller="navigation" ng-include="navigation()"></header>

感谢任何帮助过的人。

Answer 1

根据应用中路线的变化情况，您应该尝试使用路由器的事件。请参阅：https://docs.angularjs.org/api/ngRoute/service/ $ route

您可以创建$routeChangeSuccess变量，然后在e.preventDefault()事件发生时更改它。

Answer 2

您可以使用路线$route属性从resolve修改范围：

$routeProvider.when('/', {
    title: baseTitle + ' - Home',
    templateUrl: 'partials/home.php',
    resolve: { activetab: "home" }
}).when('/login', {
    title: baseTitle + ' - Login',
    templateUrl: 'partials/login.php',
    controller: 'LoginController',
    resolve: { activetab: "login" }
});

使用以下ng-if：ng-if="activetab !== 'login'"。

还有其他多种解决方案，例如使用$location来监控您的页面网址，从控制器丰富范围，收听$ route change事件等等。

使用ng-if隐藏带有angularjs的导航栏

2 个答案: