1

我有一个简单的自定义指令，其中包含对 url 的 http post 调用。单击提交按钮时，它应该调用 url，因为自定义指令属性放置在标记内。

我在 chrome 控制台中检查了它没有被调用。我不确定我哪里出错了。

代码：

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

3 回答 3

1

它应该在指令加载后立即调用，alert();在链接函数中放置 a 并删除链接函数中的当前项目，您将看到alert();

演示

但是如果要在按钮单击后立即调用函数，则需要ng-click在指令控制器或链接函数中单击后执行指令和控制器函数。

<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');
        }
      }
    };
});

这是一个演示

于 2015-06-28T16:56:58.893 回答
1

如果它只包含一个 ajax 调用，我更喜欢你不应该去寻找指令。您可以通过使用ng-click/ ng-submit（实际上是用于表单）来做到这一点。这里不需要指令。

您需要在代码中更正以下某些内容。

  1. 我们不需要使用ng-model提交按钮，它没有任何意义，因为它不包含任何值。
  2. 此外，您不需要在表单上添加操作和方法属性，因为无论如何您都是使用 JavaScript 代码制作的。
  3. 虽然提交表单 angular 确实已经提供了一个ng-submit更有意义的 .use 指令。
  4. 您需要在$http.post通话后传递数据。

标记

<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-28T16:57:26.320 回答
0

您的代码的问题只是您编写的控制器部分

<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-28T17:02:15.763 回答