Question

我的html页面包含两个部分。左侧我有导航（代码在下面），右侧是显示相应导航菜单的内容。

单击每个导航菜单时，应在我的内容部分上呈现特定部分。

我是通过在我的js文件中设置标志，使用 ng-show / ng-hide 完成的。但由于我为每个部分设置标记并显示/隐藏，我的js代码文件看起来很奇怪。我知道这不是正确的做法。

我是angularjs的新手。请帮助我有效地实现这一目标。

HTML代码:(仅导航部分）

<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#Home" data-toggle="collapse" data-target="#Login">Home</a></li>
        <div class="collapse" id="Login">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-log-in" href="#" ng-click="LoginScreen()">Login</a></li>
                <li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
            </ul>
        </div>
        <li><a href="#Contact" data-toggle="collapse" data-target="#Contact">About</a></li> 
        <div class="collapse" id="Contact">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-save" href="#" ng-click="LoadUserDetailsScreen()">LoadUserDetails</a></li>
                <li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
            </ul>
        </div>
    </ul>
</div>

JS代码：

var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {

  $scope.FlagHomeScreen = true;
  $scope.LoadData=false;
  $scope.showtable=false;
  $scope.showstatus=false;
  $scope.FlagLoginScreen = false;
  $scope.RegisterScreenFlag= false;

  $scope.menuitems =[10,20,30];

  $scope.LoginScreen = function(){
    $scope.FlagLoginScreen = true;
    $scope.FlagHomeScreen =false;
    $scope.LoadData=false;
    $scope.RegisterScreenFlag=false;
  };

  $scope.LoadUserDetailsScreen =function(){
    $scope.LoadData=true;
    $scope.FlagLoginScreen = false;
    $scope.FlagHomeScreen =false;
    $scope.RegisterScreenFlag=false;
  };

  $scope.RegisterScreen=function(){
    $scope.RegisterScreenFlag=true;
    $scope.LoadData=false;
    $scope.FlagLoginScreen = false;
    $scope.FlagHomeScreen =false;
  };
});

Answer 1

您可以使用ui-router在应用中处理导航。对于您的情况，您需要一个包含导航栏的主模板，并且在您的应用的每个状态中，您希望显示不同的视图。

这是一个小提琴，向您展示如何使用ui-router处理您的视图。为清楚起见，我仅在下面的示例中实现了登录和用户详细信息。您可以自己添加剩余部分，这对您来说是一个很好的做法。

定义您的状态：

var myApp = angular.module('myApp', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {

    $stateProvider.state('home', {
        url: "/",
        template: '<div ui-view=""/>' // templates of child states will fill components with ui-view attribute
    })
    .state('home.userDetails', {
        url: "userDetails",
        template: '<div>user details</div>',
        controller: "UserDetailsCtrl"
    })
    .state('home.login', {
        url: "login",
        //templateUrl: "path/to/login.html" // instead of giving inline templates as below, you can include your template into a html file, and use it in your state by templateUrl property
        template: '<div>user login</div>',
        controller: "LoginCtrl"
    })
}])

您可以使用ui-sref在您的州内导航，而不是使用ng-show和ng-click。

<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#Home" data-toggle="collapse" data-target="#Login">Home</a></li>
        <div class="collapse" id="Login">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">Login</a></li>
                <li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
            </ul>
        </div>
        <li><a href="#Contact" data-toggle="collapse" data-target="#Contact">About</a></li> 
        <div class="collapse" id="Contact">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-save" ui-sref="home.userDetails">LoadUserDetails</a></li>
                <li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
            </ul>
        </div>
    </ul>
</div>
<div ui-view=""/>

请勿忘记查看ui-router的文档： http://angular-ui.github.io/ui-router/site/#/api

的jsfiddle： http://jsfiddle.net/7tzXh/48/

单击angularjs中的导航菜单显示内容

1 个答案: