个人中心
gpt4 book ai didi

javascript - 我如何以 Angular 方式向我的应用程序实现广播

转载 作者：行者123 更新时间：2023-12-03 03:58:57 25 4
gpt4 key购买 nike 

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 = false so 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/

25 4 0
文章推荐： javascript - 在 Canvas 中绕原点旋转一个点
文章推荐： php - 通过php表单修改我的xml文件
文章推荐： asp.net-mvc - ASP.NET MVC View 引擎比较
文章推荐： javascript - 想要在 React 应用程序中使用 jsoneditor，但它给了我错误
行者123
个人简介

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

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