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

10-06 11:57