在 Angular ui 路由器中实现导航栏嵌套视图答案

【问题标题】：Implementing a navbar nested view in angular ui router在 Angular ui 路由器中实现导航栏嵌套视图
【发布时间】：2016-10-27 17:31:05
【问题描述】：

我是 Angular js 的新手。我正在实现一个嵌套的 ui 视图，但问题是在检查页面的当前状态时它返回许多对象，因此我不能使用 $state.current 来设置 ng-show

我希望在某些状态下显示和隐藏导航栏。

我试过了

The main index.html page
<html>......
<body ng-app="myapp">
<nav ng-controller="headerCtrl" ng-show="shownav()" >
  //here is the navbar code..The shownav is defined on the headerCtrl

</nav>

<div ui-view>   </div>

//Angular js, controllers and services links


</body>
</html>

app.js 代码

var app = angular.module('myApp', ['ui.router']);
app.controller('headerCtrl',function($scope, $state) {
    $scope.shownavbar = function(){
        var state = $state.current;
       if(state ==='login' ){
       return false;
       }else{
       return true;
   }         
}
 app.config(function($stateProvider, $urlRouterProvider, $httpProvider){

 $stateProvider
.state('login', {
    url:'/login',
    templateUrl: 'templates/index/login/login.html',
    controller: 'loginCtrl'
 })

.state('dash', {
    url: '/dash',
    templateUrl:'templates/layout/dashboard.html',
    abstract:true
})

.state('dash.call',{
    url: '/call',
    templateUrl: 'templates/index/calls/calls.html',
    controller: 'callCtrl'
})

 .state('dash.profile', {
 url: '/profile',
 templateUrl: 'templates/index/account/profile/profile.html',
 controller: 'profileCtrl'

 })


});

我希望在某些状态下隐藏导航栏，例如当用户处于登录状态时

headerctrl 我也试过了

 $scope.shownavbar = function(){
        var state = $state.current;
        $log.info(state);

  }

这会在控制台中返回：

angular.js:13708 Object {name: "", url: "^", views: null, abstract: true}
angular.js:13708 Object {name: "", url: "^", views: null, abstract: true}
angular.js:13708 Object {url: "/login", templateUrl:  "templates/index/login/login.html", controller: "loginCtrl", name: "login"}
angular.js:13708 Object {url: "/login", templateUrl: "templates/index/login/login.html", controller: "loginCtrl", name: "login"}
 angular.js:13708 Object {url: "/login", templateUrl: "templates/index/login/login.html", controller: "loginCtrl", name: "login"}

可能是什么问题

【问题讨论】：

也许您可以使用$rootScope 来保存真假，并在run() 的路径中使用查看状态何时发生变化并将其隐藏的函数。

标签： javascript angularjs angular-ui-router

【解决方案1】：

我可以用两种方法来解决这个问题。

第一个解决方案 已编辑

在您的run() 中放置一个函数来查看状态何时发生变化并隐藏或显示导航栏。

myApp.run(function ($rootScope, $state) {
    $rootScope.navbar = false;
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if (toState.name === 'login') {//toState variable see the state you're going 
            $rootScope.navbar = false;
        } else {
            $rootScope.navbar = true;
        }
    });
});

并更改您的ng-show="navbar"

第二种解决方案

我能想到的第二种解决方案是您使用多个视图。

$stateProvider
    .state('login', {
        url: '/',
        views: {
            'navbar': {
                templateUrl: null,
                controller: null
            },
            'body': {
                templateUrl: "views/login.html",
                controller: 'LoginController'
            }
        }
    })
    .state('home', {
        url: '/home',
        views: {
            'navbar': {
                templateUrl: "views/navbar.html",
                controller: null
            },
            'body': {
                templateUrl: "views/inicio.html",
                controller: null
            }
        }
    });

并在您的 html 视图中放置类似以下内容：

<div ui-view="navbar"></div>
<div ui-view="body"></div>

【讨论】：

第一个解决方案是最好的但不起作用...在 $rootScope.$on('stateChangeStart.....) 块中尝试 console.log($state.current) 后它返回null 但 console.log($state) 返回一些东西......
很抱歉我已经测试过了，它有一些变化，请看我的更新
现在它可以工作了，谢谢.. 你能否补充一下如何使用 switch 语句而不是 if(..) else...
你可以像数字一样使用它，请检查这个。 stackoverflow.com/questions/2896626/…
感谢您的帮助