пользовательская директива не получает вызов в угловой js

У меня есть простая пользовательская директива с почтовым вызовом http-адреса URL. Когда нажата кнопка отправки, она должна вызывать URL-адрес, поскольку атрибут пользовательской директивы помещается внутри тега.пользовательская директива не получает вызов в угловой js

Я проверил хром-консоль, чтобы ее не вызывали. Я не знаю, где я ошибся.

Код:

<!DOCTYPE html> 
<html ng-app="myApp" > 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <link rel="stylesheet" href="style.css" /> 
     <script> 
      var app = angular.module('myApp',[]); 
      app.directive('sendMail', function ($http) { 
       return { 
        restrict: 'A', 
        require: 'ngModel', 
        link: function (scope, element, attrs, ngModel) { 
         $http.post('MailSenderServlet.do').success(function (data) { 
         }); 
        } 
       }; 
      }); 
     </script> 
     <title>Registration Form</title> 
    </head> 
    <body ng-controller="MainCtrl"> 
     <div class="container"> 
      <h2 class="text-muted">Registration form</h2><br/> 
      <div> 
       <form name="myForm" action="RegistrationServlet.do" method="POST" novalidate> 
        <div class="form-group has-feedback"> 
         <label class="control-label">First name:</label> <input type="text" class="form-control input-sm " name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="user.uname" placeholder="First Name" required/> 
         <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span> 
         <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span> 
         <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span> 
         <span ng-if="myForm.uname.$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
        </div> 
        <button class="form-control btn btn-success" type="submit" name="submit" ng-model="submit" send-mail ">Submit</button> 
       </form> 
      </div>    
     </body> 
    </html>

источник

2015-06-28 kittu

это ш ould вызывать сразу после директивных нагрузок, помещать 'alert();' внутри функции ссылки и удалять текущие элементы внутри функции ссылки, и вы увидите 'alert();' http://plnkr.co/edit/VmknY04jPcJDoigaOXxy? p = preview –

'link: function (scope, element, attrs, ngModel) {alert (" Привет ");}' ?? Я пробовал это, я не получал предупреждения – kittu

@kittu: см. Мой ответ, вам просто нужна небольшая настройка ... –

он должен вызвать сразу после директивы нагрузок, место alert(); внутри функции связи и удаления текущих элементов внутри функции связи, и вы увидите alert();

DEMO

, но если вы хотите вызвать функцию сразу после нажатия кнопки, вам понадобится директива ng-click и функция контроллера для выполнения после нажатия кнопки в директиве cont ролика или ссылки.

<button ng-click="sendData()" class="form-control btn btn-success" type="submit" name="submit" ng-model="submit" send-mail>Submit</button>

ng-click директива добавлен.

app.directive('sendMail', function($http) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
     //alert(); 
     }, 
     controller: function($scope) { 
     $scope.sendData = function() { 
      alert('send data here'); 
     } 
     } 
    }; 
});

вот DEMO

источник

2015-06-28 16:56:58

Но на самом деле у меня есть ng-click для других функций вроде этого: '' – kittu

' затем вызвать эту директивную функцию после функции 'submit ($ event)' как '', или правильный способ сделать это - сделать 'ajax' в' submit() 'функция. –

@ K. Вы действительно чувствуете, что принимаете директиву за пост ajax.? то почему бы не 'ng-submit'? –

Я предпочитаю не должны идти на директиву, если она содержит только АЯКС вызов. Вы можете сделать это, используя ng-click/ng-submit (что фактически предназначено для форм.) Здесь нет необходимости в директиве.

Вы должны исправить что-то определенное в вашем коде.

Нам не нужно использовать ng-model для кнопки отправки, это не имеет смысла, так как не содержит значения.
Также вам не нужно добавлять атрибут action и method в свою форму, так или иначе вы делаете код JavaScript.
В то время как форма представления угловая уже предоставляет директиву, которая имеет значение ng-submit .use, что имеет смысл.
Вам необходимо передать данные в свой пост $http.post call.

Markup

<form name="myForm" ng-submit="submit(myForm)" novalidate> 
    <div class="form-group has-feedback"> 
     <label class="control-label">First name:</label> 
     <input type="text" class="form-control input-sm " name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="user.uname" placeholder="First Name" required/> 
     <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span> 
     <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span> 
     <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span> 
     <span ng-if="myForm.uname.$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
    </div> 
    <button class="form-control btn btn-success" type="submit" name="submit" send-mail="">Submit</button> 
</form>

Контроллер

$scope.submit = function(form){ 
    if(form.$valid){ 
     $http.post('MailSenderServlet.do', {user: $scope.user}) 
     .success(function (data) { 
      // 
     }); 
    } 
    else 
    alert("Please validate your form") 
}

источник

2015-06-28 16:57:26

Почему вы передаете '{user: $ scope}' в качестве параметров в сообщение я не понял? – kittu

@kittu, что мой bad..it должен быть '$ scope.user', отправляющий данные пользователя из области видимости на сервер –

Это фактический код с некоторыми другими директивами и контроллерами. Так что я должен использовать вышеупомянутый подход, который вы разместили. Пожалуйста, посмотрите plunker после того, как http://plnkr.co/edit/O7EYWTwXUUC7tfvJuXf8?p=preview – kittu

Проблема с кодом просто контроллер часть вы написали

<body ng-controller="MainCtrl">

Либо добавьте часть контроллера, либо просто удалите его, код работает нормально.

См Демо: http://jsbin.com/hulujarugu/edit?html,console,output

JS:

var app = angular.module('myApp', []); 
app.directive('sendMail', function($http) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      alert(1); 

      $http.post('MailSenderServlet.do').success(function(data) {}); 
     } 
    }; 
});

HTML:

<div class="container"> 
     <h2 class="text-muted">Registration form</h2><br/> 
     <div> 
      <form name="myForm" action="RegistrationServlet.do" method="POST" novalidate> 
       <div class="form-group has-feedback"> 
        <label class="control-label">First name:</label> <input type="text" class="form-control input-sm " name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="user.uname" placeholder="First Name" required/> 
        <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span> 
        <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span> 
        <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span> 
        <span ng-if="myForm.uname.$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
       </div> 
       <button class="form-control btn btn-success" type="submit" name="submit" ng-model="submit" send-mail >Submit</button> 
      </form> 
     </div>

источник

2015-06-28 17:02:15

в MainCtrl I ($ scope) { if ($ scope.myForm. $ недействительно) ($ event) { $ scope.user = {}; { // Или какое-либо другое обновление $ scope.myForm. $ Представлено = true; $ event.preventDefault(); } }; }); ' – kittu

пользовательская директива не получает вызов в угловой js

ответ

Смежные вопросы