Implementieren einer verschachtelten Navbar-Ansicht in eckigen UI-Router

Bin neu in der eckigen js. Implementiert eine verschachtelte ui-Ansicht, aber das Problem ist, wenn der aktuelle Zustand einer Seite überprüft wird, gibt es viele Objekte zurück, so dass ich $ state.current nicht verwenden kann, um die ng-show Implementieren einer verschachtelten Navbar-Ansicht in eckigen UI-Router

Ich möchte die Navbar angezeigt und ausgeblendet in einigen Staaten.

ich versucht habe

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>

Der app.js Code

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' 

}) 


});

ich die navbar für einige Staaten versteckt möchte, wie wenn ein Benutzer auf dem Login-Zustand

Bei der headerctrl ich habe auch versucht

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

    }

1.363.210 Das gibt in der Konsole:

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

Was gibt es das Problem

Quelle

2016-06-25 GEOFFREY MWANGI

vielleicht können Sie einen '$ rootScope' verwenden, um wahr oder falsch zu speichern, und auf dem Weg des' run() 'Verwendung eine Funktion, die sieht, wenn sich der Zustand ändert und ihn verdeckt. –

Ich kann auf zwei Arten denken, dies zu lösen.

Erste Lösung EDITED

in Ihrem run() eine Funktion setzen, um zu sehen, wenn der Zustand ändert sich und verstecken oder die Navigationsleiste zeigen.

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; 
     } 
    }); 
});

und Veränderung in Ihrem ng-show="navbar"

Zweite Lösung

die zweite Lösung, die ich denken kann, ist, dass Sie mehrere Ansichten verwenden.

$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 
      } 
     } 
    });

und in Ihren html Ansichten etwas ähnliches zu formulieren:

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

Quelle

2016-06-25 03:29:45

Die erste Lösung ist die beste, funktioniert aber nicht ... Nach dem Versuch, console.log ($ state.current) im $ rootScope. $ On ('stateChangeStart .....) zu blockieren, gibt es null zurück, aber console.log ($ state) gibt etwas zurück ... –

Es tut mir leid, ich habe es getestet und es haben ein paar Änderungen, siehe mein Update –

Jetzt funktioniert es danke .. Könnten Sie auch hinzufügen, wie die Prüfung des Zustands mit Schalter zu behandeln Anweisung anstelle von if (..) else ... –

Implementieren einer verschachtelten Navbar-Ansicht in eckigen UI-Router

Antwort

Verwandte Themen