Question

我是AngularJS的新手，我试图使用Angular编写我的第一个简单的webapp。我在尝试提交表单时遇到问题。应用程序没有反应，浏览器控制台中没有任何错误。这是我的控制器：

 angular.module('myApp.add_new_worker',         

 ['ngRoute','myApp.services','ngResource'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/newworker', {
        templateUrl: 'newworker/form.html',
        controller: 'addNewWorkerController'
    });
}])

.controller('addNewWorkerController', ['$scope','formService',function($scope,formService) {
    $scope.formInfo = [];
    this.saveData=function () {
        window.alert("HEllo world").

        formService.save($scope.formInfo);
}}] );

我的服务代码：

 var service=angular.module('myApp.services', ['ngResource']);
    service.factory('formService',['$resource',function($resource){

return $resource('http://localhost:8080/worker/add',{},{
  save:{
    method:'POST'
  }  
}
)
 }]);

我试图以这种方式使用saveData（）函数

             <form class="form-horizontal" role="form" ng-           controller="addNewWorkerController" ngSubmit="saveData()">
     <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <input type="submit"   class="btn btn-success"/>
         </div>
   </form>

Answer 1

将saveData放在$ scope。

$scope.saveData = function () {
    window.alert("HEllo world").
    formService.save($scope.formInfo);
};

Answer 2

您的ng-submit语法不正确，您应该使用＆＃39; ng-submit = saveData（）＆＃39;。

我强烈建议使用ng-model指令初始化用于表单的范围对象，因此在提交方法中，您将对象作为参数发送，并将其发送到控制器内部方法定义中的服务。所以你的代码就是这样：

＆＃13;

<form class="form-horizontal" role="form" ng-controller="addNewWorkerController" ng-submit="saveData(formInfo)">
  <div class="form-group">
     <input type="text" ng-model="formInfo.name">
  </div>
  <div class="form-group">
     <input type="password" ng-model="formInfo.password">
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <input type="submit"   class="btn btn-success"/>
    </div>
  </div>
</form>

＆＃13;

你的saveData（）方法应该在范围内，例如：＆＃39; $ scope.saveData（）= function ....＆＃39;而不是＆＃39; this.saveData（）＆＃39; ，因此可以从您的视图中访问它。

然后，无需在控制器中初始化$ scope.formInfo。

Answer 3

备注：

ng-controller属性格式错误;

ngSubmit不是有效指令，它是ng-submit;

应将saveData()函数插入$scope，否则无法在视图中调用。

这是一个片段工作，所有错误都解决了：

angular.module('myApp.add_new_worker', ['ngRoute', 'myApp.services', 'ngResource']) // .config(function($routeProvider) { // $routeProvider.when('/newworker', { // templateUrl: 'newworker/form.html', // controller: 'addNewWorkerController' // }); // }) .controller('addNewWorkerController', function($scope, formService) { $scope.formInfo = []; $scope.saveData = function() { console.log('Post!!!'); formService.save($scope.formInfo); } }); angular.module('myApp.services', ['ngResource']) .factory('formService', function($resource) { return $resource('https://google.com', {}, { save: { method: 'POST' } }) });

<!DOCTYPE html> <html ng-app="myApp.add_new_worker"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.7/angular-resource.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-route.js"></script> </head> <body ng-controller="addNewWorkerController"> <form class="form-horizontal" role="form" ng-controller="addNewWorkerController" ng-submit="saveData(formInfo)"> <div class="col-md-12"> <div class="form-group col-md-4"> <label for="name">Name: </label> <input type="text" class="form-control" id="name" ng-model="formInfo.name"> </div> <div class="form-group col-md-4"> <label for="password">Password: </label> <input type="password" class="form-control" id="password" ng-model="formInfo.password"> </div> <br> <div class="row"> <div class="col-xs-4"> <button class="btn btn-primary">Submit</button> </div> </div> </div> </form> </body> </html>

提交指令不工作AngularJS

3 个答案: