Javascript 相互干扰的指令

我有两条指令处于同一级别，如下所示：

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 
      }
    }]
 }}

<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>

我的HTML如下所示：

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 
      }
    }]
 }}

<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>

问题是，当我单击第二个表单上的submit按钮时，它实际上提交了第一个表单，这会导致错误。所以我继续向指令中添加了隔离作用域，现在发生的是控制器中附加到$scope的函数和属性现在没有被提取。例如，ng submit不知道控制器中的submitFunction

---

有谁能帮我想一想如何阻止这两个指令相互干扰？

当您使用控制器但没有指令模板时，这将不起作用。像这样尝试，并将表单作为模板添加到指令中。通过这种方式，您将能够处理指令控制器本身中的所有

$scope

。模板本身将被编译并使用指令控制器

看法

AngularJS应用程序

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
});
myApp.directive（'signinfo'，function signinfo（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
控制器：[“$rootScope”，“$scope”，函数（$rootScope，$scope）{
$scope.submitFunction=函数（formData）{
//做事
console.log（'sdfsdfd'）；
}
}]
}});

当您使用控制器但没有指令模板时，这将不起作用。像这样尝试，并将表单作为模板添加到指令中。通过这种方式，您将能够处理指令控制器本身中的所有

$scope

。模板本身将被编译并使用指令控制器

看法

AngularJS应用程序

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
});
myApp.directive（'signinfo'，function signinfo（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
控制器：[“$rootScope”，“$scope”，函数（$rootScope，$scope）{
$scope.submitFunction=函数（formData）{
//做事
console.log（'sdfsdfd'）；
}
}]
}});

为什么这里需要一个指令？我需要每个指令来处理每个表单，因为我的表单涉及到更复杂的设置，包括调用django restframework API。django restframework API处理应该在服务中解决。IMO需要一个指令。好的，结构可能会有问题，但鉴于我所拥有的，我如何解决手头的问题？好的，让它为你工作。但您应该关注其他解决方案。请检查我的答案。为什么需要在此处使用指令？我需要每个指令来处理每个表单，因为我的表单涉及到更复杂的设置，包括调用django restframework API。django restframework API处理应该在服务中解决。IMO需要一个指令。好的，结构可能会有问题，但鉴于我所拥有的，我如何解决手头的问题？好的，让它为你工作。但你应该关注另一个解决方案。请检查我的答案。