个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 20:51:40 25 4
gpt4 key购买 nike

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

在我的 Controller 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 没有显示我想要的内容。

这很有趣，因为当我放置一个名为“TEST”的简单按钮来调用函数 setUserView()

时，html dom 工作正常

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

最佳答案

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

关于javascript - Angularjs - 当 $http 内的范围值发生变化时，ng-show 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48122730/

25 4 0
文章推荐： javascript - 使用 React 向 Stripe 提交费用
文章推荐： C:尝试从文件中读取浮点字符
文章推荐： 逗号分隔值
文章推荐： c - 如何在不安装 msi 的情况下从 msi 文件获取产品版本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com