Directives causing disruption to one another

Two directives are at the same level in my code:

function signUpForm(djangoAuth, Validate){
 return{
    restrict:'A',
    controller:["$rootScope","$scope",function($rootScope, $scope){
       $scope.submitFunction = function(formData){
        //do stuff 
      }
    }]
 }}

 function signInForm(djangoAuth, Validate){
 return{
    restrict:'A',
    controller:["$rootScope","$scope",function($rootScope, $scope){
       $scope.submitFunction = function(formData){
        //do stuff 
      }
    }]
 }}

This is how it looks like in HTML:

<div>
  <div class="email_log_container">
     <form name="signup_form" class="signup_form" sign-up-form
           novalidate ng-submit="submitFunction(signup_form)">

           <input type="submit" name="submit" value="Submit" >

     </form>
  </div>

  <div class="email_log_container">
     <form name="signin_form" class="signin_form" sign-in-form
           novalidate ng-submit="submitFunction(signin_form)">

           <input type="submit" name="submit" value="Submit" >

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

Clicking the submit button on the second form actually submits the first form causing errors. Adding isolate scopes to the directives created new issues where functions and attributes attached to $scope in the controller are not recognized. For example, ng-submit does not recognize the submitFunction within the controller.

I'm looking for suggestions on preventing these two directives from interfering with each other. Any ideas?

Answer №1

If you are using a controller without a template for your directive, it may not function as expected. To make it work properly, try incorporating the form into your directive as shown in this runnable demo fiddle. By adding the form as a template within your directive, you will be able to harness the full power of `$scope` within your directive controller. The template itself will be compiled and utilized by the directive controller.

Sample View:

<div ng-controller="MyController">
  <div class="form-container"> 
    <custom-form></custom-form>
  </div>
</div>

AngularJS Setup:

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function($scope) {
});

myApp.directive('customForm', function customFormDirective(){
  return{
    restrict:'E',
    replace: true,
    template: '<form name="custom_form" class="custom_form" custom-form novalidate ng-submit="submitFunction(custom_form)"><input type="submit" name="submit" value="Submit" ></form>',
    controller:["$rootScope","$scope",function($rootScope, $scope){
      $scope.submitFunction = function(formData){
        //do something 
        console.log('sdfsdfd');
      }
    }]
}});

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

Ending Current Tab using angularJS Controller

Is there a way to automatically close the current browser tab after a successful action in AngularJS? ...

In mongoose, documents are able to update autonomously without any explicit request

I have encountered an issue with my verification logic. I am sending email links to users for verification, but they are getting verified even before clicking on the link. Below is the code snippet used for user registration: router.post("/register", asyn ...

Modify JSON from using single quotes to double quotes using JavaScript

Received a JSON from the backend to the front end that uses single quotes throughout, causing issues with a Magento 2 widget. The JSON structure is as follows: { 'mood': 'happy', 'reason': 'why shouldn't I?'} T ...

Changing the content of a DOM element containing nested elements using JavaScript/jQuery

Need some help with a DOM element that looks like this: <span>text</span> <b>some more text</b> even more text here <div>maybe some text here</div> How can I replace text with candy to achieve this result: <span> ...

An error was thrown at line 474 in module.js

After recently installing nodejs on my laptop, I'm struggling to run a js file in the node environment. I attempted using this command: node C:\Program Files\nodejs\file.js, but encountered the following error: module.js:474 thr ...

No matter how many times I modified the code in the ReactDOM.render() method within my index.js file, the end result remained unchanged

When I ran npx create-react-app my-app, and then proceeded to cd my-app and npm start, a browser opened on localhost:3000. While looking at the index.js file, I noticed that the ReactDOM.render() method included the following code: ReactDOM.render( <Rea ...

Elevating the mesh causes the ray caster to perceive it as though it has been flipped along the Y-axis

My raycaster seems to be detecting all my objects but in a flipped manner. It works fine when I add a cube without changing its position, but as soon as I move the cube up, the ray-casting goes downwards. Does anyone have a solution for this issue? Curren ...

Angular - How child components can communicate with their parent components

I'm struggling to understand how to communicate between components and services. :( Even though I've read and tried a lot, some examples work but I still don't grasp why (?). My goal is to have one parent and two child components: dashboa ...

A guide on retrieving information from a JSON file using AngularJS 2

As a beginner in AngularJS2, I am looking to extract information from a JSON file and store it in an array. This will allow me to utilize the JSON data within my components. Any assistance on this matter would be greatly appreciated. ...

If using conditional SCSS, consider overriding the variables

When working with React state, I am passing a list and calling the component where needed. comments: { elementLabel: "Comments", elementType: 'textarea', className: "form-control", ...

Unable to redirect using $location.path('/url') is causing issues

Here is my configuration for ui-router. The 'home' state acts as the parent, with 'batches' being one of its child states among others. //configuration .state('home',{ url:'/home', templateUrl:'../v ...

Combine the values of identical keys from multiple objects in an array by utilizing the forEach method in JavaScript

I am currently working on refining a shopping basket function with Vue JS. One of the key features I need to implement is a subtotal calculation that multiplies the price and quantity values for each item and then combines them to create an overall subtota ...

Navigate to the following div, navigate back to the previous div

I am attempting to implement a div navigation system with next/previous buttons. Despite searching extensively on Google, I have not found the exact solution I am looking for. First and foremost, I want to maintain the integrity of my html structure. < ...

How can you modify the color of a card in React by mapping through an array and evaluating its value?

I'm attempting to modify the color of a card depending on the current slot value, which is an object in an array. While I am iterating through each card, I want to adjust the background color of the card based on this value. However, my current method ...

Start from scratch when establishing the baseline for "defaults."

Struggling to reimagine the _.defaults function from underscore.js, I keep encountering this pesky error: Error message: should copy source properties to undefined properties in the destination object‣ AssertionError: expected { a: 'existing' ...

Encountering the error code [$injector:unpr] regarding an unknown provider: $uibModalInstanceProvider

In my web application, I have a controller called AddPrice. This controller is invoked from a Price listing screen as a popup using the $uibModal.open method, where the controller is passed in as an argument. However, the controller is not defined within t ...

PHP is returning an empty response during an AJAX request

I am facing an issue with my AJAX request where I am trying to return a simple echo, but for some reason, it's not working this time. Even after stripping down the code to its bare essentials, the response is still blank. Javascript function getUs ...

Angular JS allows you to easily remove the # symbol from a URL, improving the

I am encountering a problem with the "#" symbol in my angular js website's URL. I need to remove the # from the URL but the method provided isn't working and the site is not displaying properly. Can someone advise me on how to successfully remove ...

Is it possible to set up a local version of the Firebase database for development testing?

Can the actual code on Firebase database be avoided during development by running a local instance and developing using that, similar to other MongoDB and MySQL databases? ...

Access-Control-Allow-Origin does not accept null as the origin with XMLHttpRequest

Similar Question: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin XMLHttpRequest cannot load file://… Origin null is not allowed by Access-Control-Allow-Origin My goal is to access my JSON file using the following ...