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>当有人点击登录或注册部分页面时，我希望导航文本不出现。问题是我无法与不同的 Controller 交谈。在我的index.html页面中，我在默认 Controller 中将导航div“ng-if='dc.toggleHeader'”设置为true:“vm.toggleHeader = true;”。当用户导航到登录或注册 Controller 时，如何设置 vm.toggleHeader = false 以便隐藏导航 div。广播在这里对我有帮助吗？
最佳答案
When the user navigates to the login or register controller, how do i set
vm.toggleHeader = falseso the nav div will hide.
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 设置为适当的值。
欲了解更多信息，请参阅
关于javascript - 我如何以 Angular 方式向我的应用程序实现广播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44815339/