角度uiルータでnavbarネストされたビューを実装する

角度jsに新しい。ネストされたUIビューを実装していますが、ページの現在の状態をチェックするときに、$ state.currentを使用してng-showを設定できないようなオブジェクトが返されます。角度uiルータでnavbarネストされたビューを実装する

navbarが表示され、いくつかの州では。

私は、ユーザーがでログイン状態

上にあるときのようないくつかの州のために隠されたナビゲーションバーを希望

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' 

}) 


});

を試してみました私も試しました

$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"}

私はこれを解決するには、2つの方法で考えることができますPROBLEM

出典

2016-06-25 GEOFFREY MWANGI

多分あなたが真か偽保存するために '$ rootScope'を使用し、'ラン（） '使用のパスにすることができますが状態が変化しているときにそれを隠す関数。 –

何ができますか。

まずソリューション EDITED 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"

第二の溶液中で、私は考えることができます

第2の解決策は、あなたが複数のビューを使用しています。

$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>

出典

2016-06-25 03:29:45

最初の解決策は最高ですが動作しません... console.log（$ state.current）を$ rootScope。$ on（ 'stateChangeStart .....）ブロックで試した後、nullを返しますがconsole.log（$状態）は何かを返します... –

私はそれをテストしたし、いくつかの変更があります、ごめんなさい私の更新を参照してください –

今それは感謝..あなたはまた、スイッチを使用して状態のチェックを処理する方法を追加することができます文の代わりにif（..）else ... –

角度uiルータでnavbarネストされたビューを実装する

答えて

関連する問題