简体   繁体   English

angularjs-控制器不调用表单提交

[英]angularjs - controller not invoking upon form submit

I am new to AngularJS and I am trying the below sample code to submit my form to the server. 我是AngularJS的新手,我正在尝试下面的示例代码将表单提交到服务器。

<!doctype html>
<html lang=''>
<head>
  <meta charset="utf-8">
  <script src="../js/angular.min.v1.5.5.js"></script>
   <script>
        var app = angular.module('myApp', []);
        app.controller('myController', ['$location', function($scope, $location) {
        console.log(" controller invoked ** ");
        $scope.submit = function(emp) {
        var isvalid = true;
        if (isvalid) {
            $http.put('/addEmployee', {}).then(function(result) {
                $location.path(result.data);
            });
            return true;
        }
        return false;
      }
    }]);
</script>    
</head>
<body ng-app="myApp"  ng-controller="myController">

<form name="form1"  ng-submit="form1.submit(emp)">
  <input type="text" ng-model="emp.name" />
  <div align='center'>
         <input  type="submit" value="Submit" />
  </div>

</form>
</body>

</html>

I have started debugging the issue, I have noticed that "controller invoked **" printed once during the form loading, but not after the form submition. 我已经开始调试该问题,我注意到在加载表单时打印了“控制器调用**”,但是在提交表单后却没有打印。

Could you please help by suggesting the changes required to submit the form ? 建议您提交表格所需的更改,以帮助您吗?

Thank you. 谢谢。

Form object doesn't have submit method as it is available there in $scope , you need to call it directly. 表单对象没有submit方法,因为它在$scope可用,您需要直接调用它。 Instead of doing form1.submit(emp) on ng-submit directive, do change it to below. 与其在ng-submit指令上执行form1.submit(emp)form1.submit(emp)将其更改为以下内容。

ng-submit="submit(emp)"

Additionally do correct mistake in controller DI array 另外在控制器DI阵列中更正错误

app.controller('myController', ['$location', 
   function($scope, $location) {

should be 应该

app.controller('myController', ['$scope', '$location',  //<-- added missing $scope dependency here
   function($scope, $location) {

Pass data to put method in its 2nd parameter, currently you are passing as {} blank object just change it to emp will do the trick 将数据传递到put方法的第二个参数中,当前您正在传递{}空白对象,只需将其更改为emp就可以了

$http.put('/addEmployee', emp).then(function(result) {
   $location.path(result.data);
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM