On-submit指令不起作用AngularJS

我是AngularJS的新手，我正嘗試使用Angular編寫我的第一個簡單Web應用程序。當我嘗試提交表單時，我遇到了問題。應用程序沒有反應，並且瀏覽器控制檯中沒有任何錯誤。這裏是我的控制器：On-submit指令不起作用AngularJS

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>

來源

2016-07-07 neir45

請問您的實際代碼有'NG-controller'之間的巨大空間？ –

在你的HTML或「ng-submit」中它實際上是「ngSubmit」嗎？ – JonK

不，這只是在stackoverflow上格式化代碼的問題，@JonK ngSubmit – neir45

把SAVEDATA在$範圍。

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

來源

2016-07-07 18:11:23 JonK

以這種方式$ scope.saveData = this.saveData（）; ？ – neir45

@KrystianDrach不，你不需要添加saveData到「this」，只需要$ scope。另外請確保使用正確的ng-submit語法而不是ngSubmit。 – JonK

您的ng-submit語法不正確，您應該使用'ng-submit = saveData（）'。

我強烈建議使用ng-model指令初始化用於表單的作用域對象，因此在提交方法中，將對象作爲參數發送並在控制器內的方法定義中將其發送到您的服務。所以，你的代碼會像這樣：

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

而且你SAVEDATA（）方法應該是在範圍，如： '$ scope.saveData（）=功能......' 代替'this.saveData（）'，因此可以從您的視圖進行訪問。

然後，不需要在控制器中初始化$ scope.formInfo。

來源

2016-07-07 18:14:07

好吧，但現在我在控制檯中有這樣的錯誤：TypeError：無法讀取undefined的屬性'formService' – neir45

@KrystianDrach您應該直接調用formService，而不是作爲對象的屬性。你能發佈實際的代碼嗎？ –

注：

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>

來源

2016-07-07 21:44:18 developer033

On-submit指令不起作用AngularJS

回答

相關問題