Javascript Angularjs-ng show不'；当作用域值在$http内更改时，它将不工作_Javascript_Angularjs_Ng Show

Javascript Angularjs-ng show不'；当作用域值在$http内更改时，它将不工作

javascript angularjs

Javascript Angularjs-ng show不'；当作用域值在$http内更改时，它将不工作,javascript,angularjs,ng-show,Javascript,Angularjs,Ng Show,我是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.c

我是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>

控制台对所有值显示“true”，并在我的响应中显示“Logged In”，但ng show没有显示我想要的内容

有趣的是，当我使用一个名为“TEST”的简单按钮来调用函数时，html dom工作正常

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

之所以发生这种情况，是因为登录表单和标题都在不同的范围内，因为您在标题中使用了

ng controller

作为属性，但当路由更改时，为登录页面创建了不同的控制器实例。因此，要克服这个问题，您需要为标题和登录页面创建一个单亲作用域，或者改用

$rootScope

。

问题可能在于如何设置ng show：您可以在使用ng show指令的地方共享html代码吗？也可能是作用域污染。应使用

controllerAs

语法

ng repeat

和自定义指令是范围污染的常见罪魁祸首。我认为html太长，无法粘贴到这里。我将用html表单编辑问题！我同意@mhodges关于范围污染的概念。不幸的是，您对表单的编辑仍然没有显示表单所在的范围或

ng show

所在的范围。可以显示只包含相关代码部分的，这对于诊断此特定问题非常重要。当然！这次我将编辑显示整个范围上下文。我将尝试这样做。这很有趣，因为这对我来说没有任何意义，因为它们在同一个控制器中，它们应该在同一个范围内。

<!-- 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>

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

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

            };
        });
    };
});