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

时间:2016-05-17 09:48:15

标签: javascript html angularjs

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

我已经开始调试这个问题了,我注意到“控制器调用了**”在表单加载过程中打印了一次,但是没有在表单子目录之后打印。

您可以通过建议提交表单所需的更改来提供帮助吗?

谢谢。

1 个答案:

答案 0 :(得分:2)

表单对象没有submit方法,因为它在$scope中可用,您需要直接调用它。不是在form1.submit(emp)指令上执行ng-submit,而是将其更改为下面的内容。

ng-submit="submit(emp)"

另外在控制器DI阵列中做正确的错误

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

应该是

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

将数据传递给第二个参数中的put方法,目前你传递的是{}空白对象,只需将其更改为emp即可。

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