Angularjs

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，正在从 [=31 中的 ng-include 加载=]index.html，并拥有我想让它工作的所有 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，我将数据发送到登录：

<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"，在我的回复中显示 "Logged In"，但是ng-show 没有显示我想要的内容。

这很有趣，因为当我放置一个名为 "TEST" 的简单按钮来调用函数 setUserView()[=45 时，html dom 工作正常=]

我希望得到任何帮助或批评！

Answer 1

发生这种情况是因为登录表单和 header 都在不同的范围内，因为您使用 ng-controller 作为 header 中的属性但是有一个不同的实例路由更改时为登录页面创建的控制器。因此，要克服这个问题，您需要为 header 和登录页面创建一个 parent 范围，或者改用 $rootScope。

Angularjs - 当 $http 内的范围值发生变化时，ng-show 不起作用

Angularjs - ng-show doesn't work when scope value change inside $http

javascript

ng-show