Issues with Angular Modals not responding to ng-click commands

I created a modal using Angular, and it pops up correctly. However, I am facing an issue where the exit button does not work to close the modal. It functions properly when the button to open is clicked again, but adding a new button inside the modal does not trigger the function. Just to note, there is no Bootstrap used in this implementation.

    <section  class="modal" ng-show="showMenu">
    <div ng-click="setActive(album)">
    <p class="exit" ng-click="modalFunc()"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i></p>
    <h1>{{albumMod.artist}} - {{albumMod.title}}</h1>
    <ul class="tracks">
      <span><img src={{albumMod.img}}></span>
      <li>Album: {{albumMod.album}}</li>
      <li>Price: $1.29</li>
    </ul>
    <form style="display: inline" action="/#cart" method="get">
      <button ng-click="setActive(album); cartFunc()" id="{{album.id}}"><a>Add</a></button>
  </form>

  </div>
</section>


     $scope.closeMenu=true;
 $scope.showMenu=false;
 $scope.showItems=false;

 $scope.modalFunc= function(){
   $scope.showMenu = !$scope.showMenu;
   console.log($scope.selected);
   $scope.showItems = !$scope.showItems;
   $scope.closeMenu=!$scope.closeMenu;
   // console.log($scope.selected.attr("id"));
 };

Answer №1

The usage of the $scope.showMenu flag to hide popups has not been implemented correctly in your code. When the $scope.modalFunc method is invoked, you are negating the value of $scope.showMenu and assigning it. This means that after the assignment, the value of $scope.showMenu will be true. As a result, using ng-show="showMenu" will not effectively hide your popup.

To correct this issue, follow these steps:

1. Ensure that $scope.showMenu is set to true in the callback function that is executed when the popup is opened.
   
2. Update the $scope.modalFunc function to toggle the value of $scope.showMenu as follows:
   $scope.modalFunc = function(){
      $scope.showMenu = !$scope.showMenu;
      ...
   }
   
3. Remove the unnecessary line $scope.showMenu=false; from your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Selenium in Python to Scroll within Inner Div: A Guide

Curious about how to scroll through the chats on web.whatsapp.com? Check out the pseudo-code below: recentList = driver.find_elements_by_xpath("//div[@class='_2wP_Y']") driver.execute_script("window.scrollTo(0, 500);") I'm eager to find a ...

Recurring Triggering of Angular Directive

As a newcomer to AngularJS, I am facing an issue with my custom directive called sizeWatcher. This directive, when placed as an attribute in the HTML, is supposed to retrieve the height of the element it's attached to and store that height in a scope ...

The functionality of a JQuery post within a PHP loop is not functioning optimally

I am encountering an issue with my list.php file, which generates a list with items and a button (Erledigt!) that triggers a jQuery Post to wishdelete2.php. The problem is that the jQuery post sometimes requires multiple clicks (3x or 5x) before it process ...

Combining arrays of objects: a step-by-step guide

We start with an array A and an array B: let arrA = [{ name: 'twitter', active: true }, { name: 'medium', active: false }, { name: 'platinum', active: false } ]; Arra ...

Discover how to apply unique styles to specific HTML elements using their index values in jQuery

In the process of creating a party game similar to Tambola or Housie, I am faced with the challenge of automatically detecting and highlighting the numbers called out on each ticket in the game. For instance, if number 86 is announced, I aim to visually di ...

How can I preserve the file extension of an ejs file as .html?

I'm in the process of building an expressjs application using the ejs template engine. However, I'd like to retain the file extension as .html instead of using .ejs. The main reason for this is that I am using Visual Studio for my development wor ...

Rotating the camera in a 2D space using three.js

Within my app, I have implemented a camera: camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 1; camera.position.y = -5; camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90)); camera ...

Exploring the functionality of maximizing and minimizing logic in an Angular Bootstrap modal popup

I'm currently utilizing Angular Bootstrap Modal Popup and I'd like to include options for Maximize and Minimize in addition to the close button. By clicking on the maximize option, the popup should expand to full screen, and by clicking on minimi ...

The basic structure for organizing components and categories

I am working on creating a list and have designed the following Schema: new SimpleSchema({ element: { type: String, optional: true }, note: { type: String, optional: true }, order: { type: Number, optional: true } }); Now, I wan ...

No reply received on the web browser

I have written a code that is intended to read a JSON file and display it in the browser. The code is functioning correctly as it prints the data to the console, but for some reason, the data is not displaying on the browser. app.post("/uploadfile&q ...

Testing with mount in React Enzyme, the setState method does not function correctly

I've been experimenting with testing this code block in my React App using Jest and Enzyme: openDeleteUserModal = ({ row }: { row: IUser | null }): any => ( event: React.SyntheticEvent ): void => { if (event) event.preventDefault(); ...

What is the best way to access all of the "a" elements contained within this specific div?

Chrome websites are built using the following structure: <div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div> Utili ...

Sending data from an AJAX request to a Spring controller is a common task in web

var TableDatatablesEditable = function () { var handleTable = function () { function restoreRow(oTable, nRow) { var aData = oTable.fnGetData(nRow); var jqTds = $('>td', nRow); for (var i = 0, ...

What is the significance of property placement in a Mongo query: at the beginning versus at the

Currently, I am in the process of creating a query to retrieve data from the mango collection. Interestingly, I have written the same query in two different ways. Here is my working query: db.getCollection('routes').find({"routes.routeId": "r1q ...

An error message saying "An unexpected end of expression was encountered while trying to parse @Html.Raw

My initial attempt at combining AngularJs with ASP.NET MVC is currently underway. The code in my Index.html file is as follows: @model string @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <div class="container" ng-init="courses = [{'name': ...

Using the MEAN stack: attempting to send a string to the client via a web service but encountering difficulties accessing the string

I am in search of a web service that can send a string back to the client, as the title suggests. Here is a code snippet to provide context. This is the content of my route file: /*log.js*/ var express = require('express'); ...

Tips for managing and capturing errors in Express

const database = require('database'); const express = require('express'); const app = express(); const cors = require('cors'); app.use(cors()); const bodyParser = require('body-parser'); const urlencodedParser = body ...

Connecting two tables in an express API

Currently, I am in the process of developing an API using Express.js. At this stage, my initial tests are functioning correctly. My goal now is to retrieve values from two separate tables. For example, consider the following 2 tables: Table_A Id: 1, Name: ...

Use two queries to apply filters to entries in NextJS

Greetings to all! I am currently working on a project in NextJS that involves showcasing a portfolio of works generated from JSON data. [ { "title": "WordPress Plugin for Yandex Recommender Widget", "image" ...

What is the proper procedure for entering data in the correct sequence using JavaScript?

I am currently utilizing Node.js to send data to a SQL Server table. Within the code, there is a for loop that calls a function triggering an insert statement (which will eventually transition to being a stored procedure). This loop iterates through variou ...