console.log('js');
var myApp = angular.module('myApp', ["ngRoute"]);
myApp.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrlnp: 'views/partials/logIn.html',
controller: 'LoginController as lc'
}).when('/register', {
templateUrl: 'views/partials/register.html',
controller: 'RegisterController as rc'
}).when('/login', {
templateUrl: 'views/partials/logIn.html',
controller: 'LoginController as lc'
}).when('/userProfile', {
templateUrl: 'views/partials/userProfile.html',
controller: 'UserProfileController as uc'
});
}); //end config
//global variables
myApp.controller('DefaultController', DefaultController);
myApp.controller('RegisterController', RegisterController);
myApp.controller('LoginController', LoginController);
myApp.controller('UserProfileController', UserProfileController);
function DefaultController(navBarService) {
var vm = this;
console.log('inside of DefaultController');
navBarService.toggleHeader(vm.toggleHeader);
vm.toggleHeader = true;
} //end DefaultController
function RegisterController(credentialsService) {
var vm = this;
console.log('RegisterController');
vm.register = function() {
if (vm.firstNameRegister === undefined || vm.lastNameRegister === undefined || vm.emailRegister === undefined || vm.passwordRegister === undefined || vm.zipcode === undefined) {
sweetAlert({
title: "Error!",
text: "Something went wrong",
type: "error"
}); //end of sweetAlert
} else if (vm.firstNameRegister === '' || vm.lastNameRegister === '' || vm.emailRegister === '' || vm.passwordRegister === '' || vm.zipcode === null) {
sweetAlert({
title: "Error!",
text: "Something went wrong",
type: "error"
}); //end of sweetAlert
} else {
var userCredentials = {
firstName: vm.firstNameRegister.toLowerCase(),
lastName: vm.lastNameRegister.toLowerCase(),
email: vm.emailRegister,
password: vm.passwordRegister,
zipcode: vm.zipcode
}; //end userCredentials
credentialsService.sendRegister(userCredentials);
} //end of conditional statement
}; //end register function
} //end register controller
function LoginController(credentialsService) {
var vm = this;
console.log('LoginController');
vm.login = function() {
if (vm.emailLogin === undefined || vm.passwordLogin === undefined) {
sweetAlert({
title: "Error!",
text: "Something went wrong",
type: "error"
}); //end of sweetAlert
} else {
var userCredentials = {
email: vm.emailLogin,
password: vm.passwordLogin
}; //end userCredentials
console.log(userCredentials);
credentialsService.sendLogin(userCredentials).then(function() {
console.log('back from the service with', credentialsService.response);
if (credentialsService.response === 'Match!!!') {
var id = userCredentials.email;
credentialsService.getUsers(id);
window.location.replace("http://localhost:7138/#!/userProfile");
} else {
sweetAlert({
title: "Error!",
text: "No user found",
type: "error"
}); //end of sweetAlert
} //end of else
}); //end of then
} //end of else conditional statement
}; //end log in function
} //end register controller
function UserProfileController() {
console.log('inside of UserProfileController');
var vm = this;
vm.getUserInfo = function() {
console.log('inside of getUserInfo');
}; //end of getUserInfo
} //end of userProfile
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rental app</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="vendors/angular.min.js" charset="utf-8"></script>
<script src="vendors/angular-route.min.js" charset="utf-8"></script>
<script src="scripts/client.js" charset="utf-8"></script>
<script src="scripts/services/credentialsService.js" charset="utf-8"></script>
<script src="scripts/services/navBarService.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<link rel="stylesheet" href="styles/register.css">
</head>
<body ng-app='myApp'>
<div class="container" ng-controller='DefaultController as dc'>
<div class="Navigation" ng-if='dc.toggleHeader'>
<h1>Navigation</h1>
</div>
<ng-view></ng-view>
</div>
</body>
</html>
当有人点击登录或注册部分页面时,我希望导航文本不会出现。问题是我无法与其他控制器交谈。在我的index.html页面中,我在默认控制器中将导航div“ ng-if ='dc.toggleHeader'”设置为true:“ vm.toggleHeader = true;”。当用户导航到登录或注册控制器时,如何设置vm.toggleHeader = false以便导航div隐藏。广播对我有帮助吗?
最佳答案
当用户导航到登录或注册控制器时,如何设置vm.toggleHeader = false
以便导航div隐藏。DefaultController
可以使用$route
服务来确定正在使用的当前templateUrl:
function DefaultController(navBarService, $route) {
var vm = this;
console.log('inside of DefaultController');
navBarService.toggleHeader(vm.toggleHeader);
vm.toggleHeader = true;
vm.$doCheck = function() {
vm.toggleHeader = true;
if ($route.current.templateUrl == 'views/partials/logIn.html') {
vm.toggleHeader = false;
};
if ($route.current.templateUrl == 'views/partials/register.html') {
vm.toggleHeader = false;
};
};
}
在每个摘要循环中,
$doCheck
函数将检查当前路径并将toggleHeader
设置为适当的值。有关更多信息,请参见
AngularJS $route Service API Reference
AngularJS $compile Service API Reference - Life Cycle Hooks