Question

我是angularjs的初学者，我遇到了这种情况：我正在尝试在导航栏上实现ng-show，根据用户登录名进行更改。

首先，这是包含所有模板的 index.html 。

<html lang="pt-br" ng-app="Schedules">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
<script src="js/schedules.controller.js"></script>

<meta charset="UTF-8">
<title>Home</title>

</head>
<body>

<!-- CONTAINER -->
<div class="container"> 

    <header ng-include="'views/header.php'"></header>       
    <main ui-view></main>
    <footer ng-include="'views/footer.php'"></footer>

<!-- END CONTAINER -->
</div>

</body>

</html>

这是我的 header.php ，它是从 index.html 中的ng-include加载的，并且让我想要让它工作的所有ng-shows。

<!-- NAVBAR -->
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse rounded mr-0 mt-1 pb-auto pt-auto" ng-controller="userCheck">
    <button ng-click="setUserView()">TEST</button>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#/home">Home</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active" ng-show="userView.valueBtn">
        <a class="nav-link" href="#/lucroMensal">Values</a>
      </li>
      <li class="nav-item active" ng-show="userView.allvaluesBtn">
        <a class="nav-link " href="#/todosValores">All Values</a>
      </li>
        <li class="active li-navbar" ng-show="userView.logoutBtn">
            <button id="btn_sair" class="btn btn-danger mt-1 mb-1 btn-sair" name="btn_sair" type="submit">Sair</button>
        </li>           
    </ul>
  </div>
</nav>

这是我将 login_page.php 发送到Login：

<h1 class="text-left pb-3 pt-3">Login Page</h1>
<div class="container">
    <div class="row">   
        <div class="col-md-6" style="border-left: groove"><!-- FORM LOGIN -->           
            <form class="form-horizontal" id="form-login" ng-submit="loginCheck()">

            <!-- ALERTS BOOTSTRAP -->
            <div class="alert alert-warning alert-dismissable" ng-hide="userDialog.userNExist">
                <a href="" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>User doesn't exit!</strong> or username/password is wrong.
            </div>

            <label for="form"><strong>LOGIN: </strong></label>
            <!-- USERNAME INPUT-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="userLogin.username">Username: </label>  
              <div class="col-md-7">
              <input id="userLogin.username" ng-model="userLogin.username" type="text" placeholder="Digite nome de usuário" class="form-control input-md" required="" maxlength="30">             
              <small class="form-text text-muted">Ex.: lucas_silva, araujo_lima, pedro354</small>
              </div>

            </div>

            <!-- PASSWORD INPUT-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="userLogin.password">Password: </label>
              <div class="col-md-7">
                <input id="userLogin.password" ng-model="userLogin.password" type="password" placeholder="Digite a senha" class="form-control input-md" required="" maxlength="16">             
              </div>
            </div>

            <!-- BUTTON FORM-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="btn_form"></label>
              <div class="col-md-4">    
                <button id="btn_login" name="btn_login" class="btn btn-success mb-1" type="submit">Login</button>                           
              </div>
            </div>  

            </fieldset>
            </form>
        </div>  
    </div>
</div>
<!-- END CONTAINER -->

在我的控制器 schedules.controller.js 里面，我有：

var app = angular.module("Schedules", [ "ui.router"]);

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('login', {
        url:'/login',
        templateUrl: './views/login_page.php',
        controller: 'userCheck'
    })
    .state('home', {
        url:'/home',
        templateUrl: './views/home.php',
        resolve: {
            check: function($state, user) {
                if (!user.userStatus()) {
                    $state.go("login");
                };
            }
        }
    });
    $urlRouterProvider.otherwise("login");
});

//SERVICE user
app.service('user', function () {

    var loggedIn = false;
    var username;
    this.setName = function (name) {
        username = name;
    };

    this.getName = function () {
        return username;
    };

    this.userStatus = function () {
        return loggedIn;
    };

    this.userLoggedIn = function () {
        loggedIn = true;
    }


    this.getUserView = function () {
        return userView;
    }
});

//CONTROLLER userCheck
app.controller("userCheck", function ($scope, $state, $http, user) {

    //vars
    var userLogin = {
        username: undefined,
        password: undefined
    };

    $scope.userView = { //show/hide user menu
        valueBtn: false,
        allvaluesBtn: false,        
        logoutBtn: false
    };

    $scope.userDialog = { //show/hide user alert messages
        passwordMatch: true, 
        userNotMatch: true, 
        userRegistred: true, 
        userNExist: true 
    };

    //functions
    $scope.setUserView = function () {
        $scope.userView.valueBtn = true;
        $scope.userView.allvaluesBtn = true;
        $scope.userView.logoutBtn = true;
        console.log($scope.userView);
    };

    $scope.loginCheck = function () {
        data = {
            "username": $scope.userLogin.username,
            "password": $scope.userLogin.password
        };

        $http.post("./includes/json_login.php/usuariologgin", data)
        .then(function (response) {

            if (response.data.status == "Wrong username or password or user doesn't exist") {

                $scope.userDialog.userNExist = false;

            } else if (response.data.status == "User logged in") {

                // console.log(response.data.status);
                user.setName = response.data.username;
                user.userLoggedIn();
                $scope.setUserView();
                $state.go('home');

            };
        });
    };
});

控制台显示所有值的“true”，并在我的回复中显示“登录”，但是ng-show没有显示我想要的内容。

它很有趣，因为html dom工作正常，当我把一个名为“TEST”的简单按钮调用函数 setUserView（）

我会喜欢任何帮助或批评！

Answer 1

这是因为登录表单和标题都在不同的范围内，因为您在标题中使用ng-controller作为属性，但是当路由为登录页面创建了不同的控制器实例时变化。因此，为了克服这个问题，您需要为标题和登录页面创建单个父作用域，或者使用$rootScope代替。

当$ http内的范围值更改时，Angularjs - ng-show不起作用

1 个答案: