我在页面上有一个导航栏，其中包含登录/注册选项。我希望在用户登录成功时将“登录/注册”选项更改为“用户名”。为此，我在成功登录后将变量（“会话”）值初始化为false我将其更改为true并获取用户名。然后我使用ng-show指令在变量“session”值变为true时显示一个选项。但是我不知道会话值在index.php页面中没有得到绑定，这在应用程序运行时第一次加载。这是index.php的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Read Products</title>
<!-- include material design CSS -->
<link rel="stylesheet" href="libs/css/materialize/css/materialize.min.css" />
<!-- include material design icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- custom CSS -->
<style>
.width-30-pct{
width:30%;
}
.text-align-center{
text-align:center;
}
.margin-bottom-1em{
margin-bottom:1em;
}
#start-button, #login-button {
background-color: #f3989b;
font-size: 18px;
font-weight: 400;
height: 70px;
line-height: 70px;
width: 260px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="productsCtrl">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#/about">About us</a></li>
<li><a href="#/services">Services</a></li>
<li><a href="#/listing">Product listing</a></li>
<li><a href="#/signup" ng-show="!session">Login/Signup</a></li>
<li><a href="#/profile" ng-show="session">dfsggf</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#/about">About us</a></li>
<li><a href="#/service">Services</a></li>
<li><a href="#/signup">Login/Signup</a></li>
</ul>
</div>
</nav>
<div ng-view></div>
<script type="text/javascript" src="libs/bower_components/jquery/dist/jquery.min.js"></script>
<!-- material design js -->
<script src="libs/css/materialize/js/materialize.min.js"></script>
<!-- include angular js -->
<script src="libs/bower_components/angular/angular.min.js"></script>
<script src="libs/bower_components/angular-route/angular-route.min.js"></script>
<script src="libs/js/config.js"></script>
<script src="libs/js/app.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
console.log("adfad")
$(".button-collapse").sideNav();
});
</script>
</body>
</html>
Here is the code of app.js:
$(document).ready(function () {
// initialize modal
$('.modal-trigger').leanModal();
});
// angular js codes will be here
app.controller('aboutCtrl', ["$scope", function ($scope) {
$scope.message = 'About';
}]);
app.controller('productsCtrl', ["$scope", "$http", "$location", function ($scope, $http, $location) {
// more angular JS codes will be here
// read products
$scope.username ='name';
$scope.welcomeMessage = false;
$scope.session = true;
$scope.user = {};
$scope.logins = {};
$scope.getAll = function () {
$http.get("read_products.php").success(function (response) {
$scope.names = response.records;
});
}
$scope.loginForm = function () {
$http({
method: 'POST',
url: 'login.php',
data: $scope.logins,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
// var json = JSON.parse(data);
// console.log(data);
if (data.errormessage) {
Materialize.toast(data.errormessage, 4000);
} else {
// console.log("logged")
// $location.path('/listing');
$scope.session = true;
console.log($scope.session);
$scope.username = data.session.firstname + " "+ data.session.lastname;
console.log($scope.username);
Materialize.toast(data.message.login, 4000);
}
})
}
$scope.submitForm = function () {
$http({
method: 'POST',
url: 'authenticate.php',
data: $scope.user,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function (data, status, headers, config) {
// console.log(data)
if (data.status) {
User.isLogged = true;
}
if (data.errors) {
$scope.errorName = data.errors.name;
$scope.errorUserName = data.errors.username;
$scope.errorEmail = data.errors.email;
Materialize.toast(data.errors.lastname, 4000);
} else {
// $scope.message = data.message;
// $scope.hello = data;
$scope.welcomeMessage = true;
console.log($scope.welcomeMessage);
Materialize.toast(data, 4000);
}
});
};
$scope.readOne = function (id) {
// change modal title
$('#modal-product-title').text("Edit Product");
// show udpate product button
$('#btn-update-product').show();
// show create product button
$('#btn-create-product').hide();
// post id of product to be edited
$http.post('read_one.php', {
'id': id
})
.success(function (data, status, headers, config) {
console.log(data)
// put the values in form
$scope.id = data[0]["id"];
$scope.name = data[0]["name"];
$scope.description = data[0]["description"];
$scope.price = data[0]["price"];
// show modal
$('#modal-product-form').openModal();
})
.error(function (data, status, headers, config) {
Materialize.toast('Unable to retrieve record.', 4000);
});
}
$scope.deleteProduct = function (id) {
// ask the user if he is sure to delete the record
if (confirm("Are you sure?")) {
// post the id of product to be deleted
$http.post('delete_product.php', {
'id': id
}).success(function (data, status, headers, config) {
// tell the user product was deleted
Materialize.toast(data, 4000);
// refresh the list
$scope.getAll();
});
}
}
$scope.showCreateForm = function () {
// change modal title
console.log("asdefuhy")
$('#modal-product-title').text("Create New Product");
// hide update product button
$('#btn-update-product').hide();
// show create product button
$('#btn-create-product').show();
$('#modal-product-form').openModal();
// clear variable / form values
$scope.clearForm = function () {
$scope.id = "";
$scope.name = "";
$scope.description = "";
$scope.price = "";
$scope.createProduct = function () {
// fields in key-value pairs
$http.post('create_product.php', {
'name': $scope.name,
'description': $scope.description,
'price': $scope.price
}
).success(function (data, status, headers, config) {
console.log(data);
// tell the user new product was created
Materialize.toast(data, 4000);
// close modal
$('#modal-product-form').closeModal();
// clear modal content
$scope.clearForm();
// refresh the list
$scope.getAll();
});
}
}
// clear form
$scope.clearForm();
// create new product
// update product record / save changes
$scope.updateProduct = function () {
$http.post('update_product.php', {
'id': $scope.id,
'name': $scope.name,
'description': $scope.description,
'price': $scope.price
})
.success(function (data, status, headers, config) {
// tell the user product record was updated
Materialize.toast(data, 4000);
// close modal
$('#modal-product-form').closeModal();
// clear modal content
$scope.clearForm();
// refresh the product list
$scope.getAll();
});
}
// delete product
}
// retrieve record to fill out the form
}]);