So zeigen Sie das Nav-Menü während der Verwendung von UI-Router an

Ich versuche, Navigationsleiste Menüelemente mit ng-repeat anzuzeigen, und ich verwende ui router gleichzeitig, aber Ausgabe ist nicht das, was ich erwartet habe.So zeigen Sie das Nav-Menü während der Verwendung von UI-Router an

<!--HTML--> 
<body> 
<div ng-app="navApp" ng-controller="navCtrl"> 
      <a ng-repeat="item in navItems" ui-sref="{{item.sref}}">{{item.label}}</a> 
    </div> 
    <div ng-app="mainApp"> 
     <div ui-view></div> 
    </div> 
</body> 

//JS 
angular.module('navApp', []).controller('navCtrl', function($scope){ 
    $scope.navItems = [ 
     {'sref': 'home', 'label': 'Home'}, 
     {'sref': 'login', 'label': 'Login'}, 
     {'sref': 'signup', 'label': 'Signup'}, 
     {'sref': 'other', 'label': 'Label'} 
    ]; 
}); 


var app = angular.module('mainApp', ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider){ 
// $urlRouterProvider.otherwise('/'); 

    $stateProvider.state('login', { 
     url: '/login', 
     templateUrl:'login.html', 
     controller: function($scope) { 
      $scope.message = 'Login Page'     
     } 
    }).state('signup', { 
     url: '/signup', 
     templateUrl:'signup.html', 
     controller: function($scope) { 
      $scope.status = 'Signup Page' 
     } 
    }).state('home', { 
     url: '/', 
     template:'Home Page' 
    }).state('other', { 
     url: '/other', 
     template:'Other Page' 
    }); 
});

Ich erhalte Ausgabe als:

HomeLoginSignupLabel

Hier sref arbeiten nicht als href. Wenn Sie das statische Navigationsmenü verwenden, anstatt es dynamisch anzuzeigen, funktioniert alles einwandfrei. Ich denke, dass beide apps gleichzeitig ausgeführt werden, dieses Problem verursachend.

Quelle

2016-06-10 Mahesh.D

Gebrauch einige navbar wie bootsrap oder semantisch-ui usw.

Bootstrap Beispiel:

<body> 
     <div ng-app="navApp" ng-controller="navCtrl"> 
     <nav class="navbar navbar-inverse"> 
      <ul class="nav navbar-nav"> 
       <li ng-repeat="item in navItems"><a ui-sref="{{item.sref}}">{{item.label}}</a></li> 
      </ul> 
      </nav> 
     <div ng-app="mainApp"> 
     <div ui-view></div> 
     </div> 
</body>

Quelle

2016-10-20 09:47:08

Dies bietet keine Antwort auf die Frage. Sobald Sie genügend [Reputation] (http://stackoverflow.com/help/whats-reputation) haben, können Sie [jeden Beitrag kommentieren] (http://stackoverflow.com/help/privileges/comment); stattdessen [geben Sie Antworten, die keine Klärung durch den Fragesteller erfordern] (http://meta.stackexchange.com/questions/214173/why-doe-i-need-50-reputation-to-comment-what-can- i-do-stattdessen). - [Aus Bewertung] (/ review/low-quality-posts/14042288) –

Bearbeiten Sie die Antwort, ich hoffe es ist klarer –

Jetzt sieht es gut aus. –

So zeigen Sie das Nav-Menü während der Verwendung von UI-Router an

Antwort

Verwandte Themen