Unusual phenomena exhibited by my variable scopes

Question

Unusual phenomena exhibited by my variable scopes

I am a beginner in this industry and I have a desire to create an app. However, I am facing some challenges at the moment. Below is a simplified version of my code. My goal is to have the API display only the signUp option initially. Upon clicking on signUp and then pressing submit, I want the button to switch to display only signout.

Currently, my scope variable is not functioning as intended and both buttons are being displayed. Can you please make the necessary modifications and explain the reason behind this issue? If possible, kindly utilize rootscope, scope, and sc.logIn() so that I can learn how to implement it correctly. Thank you!

https://plnkr.co/edit/ewhLZsKKTWTzlECsj4xO?p=preview

angular.module('myApp',['myApp.dashboard','myApp.signUp']);

angular.module('myApp.dashboard').controller('mainControl',mainControl);
mainControl.$inject = ['$rootScope','$scope'];
function mainControl($rootScope,$scope){
  $rootScope.logged=false;
    $scope.logged=$rootScope.logged;
}


angular.module('myApp.signUp').controller('signUpControl',signUpControl);
signUpControl.$inject = ['$rootScope','$scope'];
function signUpControl($rootScope){
    alert("haha");
    this.logIn=function(){
        $rootScope.logged=true;
    };
}

javascript angularjs

Answer 1

Answer №1

There are a few key issues present in your code that need to be addressed.

When declaring a module without specifying any dependencies, the module will attempt to fetch an already declared or defined module. To create a new module, it is important to pass in the necessary dependencies or provide an empty array if there are none.

Additionally, it is crucial to monitor any changes made to the scope to ensure that these modifications are properly communicated to the controllers and reflected in the view.

Here is a functional solution that addresses these issues:

angular.module('myApp', ['myApp.dashboard', 'myApp.signUp']);

angular.module('myApp.dashboard', []).controller('mainControl', mainControl);

function mainControl($rootScope, $scope) {
  $rootScope.logged = false;
  $rootScope.$watch(() => $rootScope.logged, function() {
    $scope.logged = $rootScope.logged;
  });
}

mainControl.$inject = ['$rootScope', '$scope'];

angular.module('myApp.signUp', []).controller('signUpControl', signUpControl);
signUpControl.$inject = ['$rootScope'];

function signUpControl($rootScope) {
  this.logIn = function() {
    var a = 1;
    $rootScope.logged = true;
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainControl as mc">
    <div>{{mc.logged}}
      <div ng-hide="logged">

        <button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button>
      </div>
      <div ng-show="logged">
        <button>Sign Out</button>
      </div>
    </div>


    <div class="signUp modal fade" id="sighUp" ng-controller='signUpControl as sc'>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">sigh up</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          </div>
          <div class="modal-body">
            <form id="signUpForm" name="signUpForm" ng-submit="sc.logIn()">
              <label for="email">
                <span>email:</span>
                <input type="email" name="email">
              </label>
              <button class="submit" id="signUpSubmit" type="submit" value="signUp">submit</button>
            </form>
          </div>
          <div class="modal-footer">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

An issue seems to persist with submitting the form using the provided code snippet.

You may explore a working solution here: Codepen

Answer 2

There are a few key issues present in your code that need to be addressed.

When declaring a module without specifying any dependencies, the module will attempt to fetch an already declared or defined module. To create a new module, it is important to pass in the necessary dependencies or provide an empty array if there are none.

Additionally, it is crucial to monitor any changes made to the scope to ensure that these modifications are properly communicated to the controllers and reflected in the view.

Here is a functional solution that addresses these issues:

angular.module('myApp', ['myApp.dashboard', 'myApp.signUp']);

angular.module('myApp.dashboard', []).controller('mainControl', mainControl);

function mainControl($rootScope, $scope) {
  $rootScope.logged = false;
  $rootScope.$watch(() => $rootScope.logged, function() {
    $scope.logged = $rootScope.logged;
  });
}

mainControl.$inject = ['$rootScope', '$scope'];

angular.module('myApp.signUp', []).controller('signUpControl', signUpControl);
signUpControl.$inject = ['$rootScope'];

function signUpControl($rootScope) {
  this.logIn = function() {
    var a = 1;
    $rootScope.logged = true;
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainControl as mc">
    <div>{{mc.logged}}
      <div ng-hide="logged">

        <button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button>
      </div>
      <div ng-show="logged">
        <button>Sign Out</button>
      </div>
    </div>


    <div class="signUp modal fade" id="sighUp" ng-controller='signUpControl as sc'>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">sigh up</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          </div>
          <div class="modal-body">
            <form id="signUpForm" name="signUpForm" ng-submit="sc.logIn()">
              <label for="email">
                <span>email:</span>
                <input type="email" name="email">
              </label>
              <button class="submit" id="signUpSubmit" type="submit" value="signUp">submit</button>
            </form>
          </div>
          <div class="modal-footer">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

An issue seems to persist with submitting the form using the provided code snippet.

You may explore a working solution here: Codepen

Answer 3

Answer №2

There's nothing strange about it.
Check your console for error messages.
The issue seems to be with the angular bootstrap error.

angular.module('myApp.dashboard', [])
-------------------------------   ^^  ------- should be an array, even if empty

Answer 4

There's nothing strange about it.
Check your console for error messages.
The issue seems to be with the angular bootstrap error.

angular.module('myApp.dashboard', [])
-------------------------------   ^^  ------- should be an array, even if empty

Unusual phenomena exhibited by my variable scopes

Answer №1

Answer №2

Similar questions

With the power of Jquery, conceal a div that has not yet materialized but will come into existence

Tips for efficiently displaying a computed property on a template using Vuetify?

Tips for adding borders to specific rows and columns using ALASQL in Excel and AngularJS

Transfer the text entered in one textbox to another textbox located within a dynamic table

What is the best way to incorporate a JSON file into a JavaScript class?

Using the AngularJS double Array ng-repeat feature allows for easy iteration

What could be causing my variable to not be stored correctly by my useState hook?

Using ng-repeat with ng-model; accessing the value of ng-model

Why does routing function correctly in a browser with AngularUI Router and Ionic, but not in Ionic View?

Tips for updating the minimum value to the current page when the button is pressed on the input range

How to use React MUI Checkbox to set the checked value as false

Exploring the process of querying and modifying subdocuments in MongoDB

Implementing specifications throughout the entire nodejs route

A helpful guide on how to dynamically input database values into the href attribute of an 'a' tag

Adding a Byte to a Hexadecimal Escape Sequence in JavaScript: A Step-by-Step Guide

What is the best method for assigning a user input value from HTML to a JSON variable?

Sending an Ajax request to C# code

The paragraph tag remains unchanged

Expanding the original state of the parent by incorporating additional perspectives

Guide to implementing a Bootstrap dropdown in an Angular application