Having trouble with the second Angular directive not functioning correctly

I am encountering an issue with two directives on the same page. The first directive is functioning correctly, but the second one is not working as expected.

Below is the code snippet:

HTML

<body class="login" ng-app="Login">
<div ng-controller="HttpLoginController">
<wrongdetails></wrongdetails>
<loading></loading>
<input type="submit" ng-click="LoginUser()" value="Login" />
</div>
</body>

JS

var app = angular.module("Login", [])
app.controller("HttpLoginController", function($scope,$http){
$scope.LoginUser = function(){
$scope.loading = true;
var data = [];
var config = {}
$http.post('Mylink', data, config)
.success(function (data, status, headers, config) { $scope.loading = false;})
.error(function (data, status, header, config) {$scope.wrongdetails = true; });
};      
});
//Directives
app.directive('loading', function () {
    return {
        restrict: 'E',
        //replace:true,
        template: '<div id="loading"> <div class="progress-line"></div><br/> </div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
    }
})
app.directive('wrongdetails', function () {
    return {
        restrict: 'E',
        replace:true,
        template: '<div class="alert alert-danger display-hide"><button class="close" data-close="alert"></button><span> Error. </span></div>',
        link: function (scope, element, attr) {
              scope.$watch('wrongdetails', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
    }
})

However, the second directive does not seem to be displaying. Can someone please point out what I might be doing wrong?

Apologies for my oversight. I realize now that I forgot to include the copy-pasted directives. Everything should be in order now.

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

Firebase authentication encountered an error due to a network request failure

Utilizing firebase Hosting to host my website, I am encountering a persistent error when attempting to login using email/password. This is the JavaScript code that I am using: window.onload = () => initApp(); //Initialize screen function initApp(){ ...

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

After completing the mapSeries operation, I aim to re-implement the function

How can I return queries (functions) after performing mapSeries? Any help is appreciated! async querys(querys) { const pool = await poolPromise; if (pool != null) { const transaction = new sql.Transaction(pool); ...

What is the process of integrating passportjs(node) API with the Angular cli?

After successfully configuring Node.js with PassportJS OAuth2, the need arose for Angular to call the Node API. However, they are running on different ports. While calling all of Node.js's REST APIs from Angular works fine using proxy.conf.json, an er ...

React to the Vue: Only activate the event if the key is pressed twice consecutively

In my application, I am creating a unique feature where users can trigger a window to appear by inputting the symbol @ (shift + 50). This will allow them to access predefined variables... <textarea @keyup.shift.50="showWindow"></textarea> My ...

Assign value to twig variable using JavaScript in Symfony version 3.4

Hello everyone, I am currently working on a form that is functioning well. However, I am facing an issue with setting the localization of a place manually using latitude and longitude values. To address this, I decided to create a map with a draggable mark ...

Observe the present time in a specific nation

Is there an authorized method to obtain and showcase the current accurate GMT time instead of relying on the easily manipulable local time on a computer? I am looking for a reliable way to acquire the current time in hours/minutes, so I can make calculati ...

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...

Discover how to efficiently load and display a JSON array or object using JavaScript

I am new to learning about json and d3, having just started a few hours ago. While I have basic knowledge of javascript, I need help with loading a json file and displaying all the arrays and objects on the console using d3. I tried to do it myself but unf ...

"What is the best way to access and extract data from a nested json file on an

I've been struggling with this issue for weeks, scouring the Internet for a solution without success. How can I extract and display the year name and course name from my .json file? Do I need to link career.id and year.id to display career year cours ...

What is the reason behind being able to use any prop name in a React function without explicitly mentioning it?

Currently, I'm delving into the world of mobX-state-tree, and in the tutorial code that I'm exploring, there is an interesting piece that caught my eye. const App = observer(props => ( <div> <button onClick={e => props.store. ...

Issue with Vue JS function not providing the desired array output

I declared a property in my data model like this: someArray: [] A function returns an array: getMyArray: function (someId) { var result = [7, 8, 9, 10]; return result; } I'm assigning the result of the function to m ...

Access an HTML element and using JavaScript to make changes to it

As a new web developer, I am eager to create a grid of file upload zones on my site. I have decided to use DropZone.js for this project. I have customized DropZone and added multiple drop zones in the HTML. The grid layout consists of four rows with four ...

Utilize a for loop to reference variable names with numbers

Is there a way to extract values from req.body.answerX without manually coding each one using a for loop? I currently have values stored as "answer1, answer2" and so on. This is what I tried: for( var i = 1; i <= 10; i++){ console.log(req. ...

How to create expandable nodes with lazy-loaded children in Dynatree?

I have successfully implemented a tree navigation menu using Dynatree (). The tree consists of four levels: company, group, user, and computer. Each object within the tree is selectable, opening a page displaying the properties of that specific object. How ...

Checking the status of a toggle button in Protractor: How to determine if it is enabled or disabled

Currently, I am utilizing protractor for the automation of a mobile application. My objective is to confirm whether the toggle button (attached image) is checked, disabled, or enabled. However, each time I attempt to verify this, it seems to indicate that ...

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

What is the reason Angular is unable to locate a controller for a directive in an external file?

As a newcomer to Angular, I'm struggling to comprehend John Papa's recommendations. His guidelines suggest placing controller logic inside directives, but this approach doesn't seem intuitive to me. Despite my efforts to implement it myself, ...

I am having trouble with my jQuery datatable Ajax call - instead of reaching the server, I am seeing an alert indicating

Looking for help with my web page. I have a table that needs to be populated using AJAX calls to the server-side method. I've implemented jQuery DataTables, and here's the code snippet: $(document).ready(function() { $("#tableUserList").DataTa ...

The process of uploading a file is interrupted by an AJAX Timeout

My HTML form includes a file input field that utilizes AJAX to upload the selected file, complete with a progress bar. However, I encountered an issue where the request would hang without any response. To prevent this from happening in the future, I aim t ...