Einreichen-Anweisung funktioniert nicht AngularJS

Ich bin neu bei AngularJS und versuche meine erste einfache Webapp mit Angular zu schreiben. Ich bekomme ein Problem, wenn ich versuche, ein Formular einzureichen. Die App reagiert nicht und es gibt keine Fehler in der Browser-Konsole. Hier ist mein Controller:Einreichen-Anweisung funktioniert nicht 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); 
}}]);

Mein Service-Code:

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

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

Und ich versuche speichereDaten() Funktion auf diese Weise

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

Quelle

2016-07-07 neir45

Gibt es in Ihrem aktuellen Code hat den riesigen Raum zwischen 'ng- controller'? –

Ist es tatsächlich "ngSubmit" in Ihrem HTML oder "ng-submit"? – JonK

nein, das ist nur ein Problem mit Formatierung Code auf Stackoverflow, @JonK ngSubmit – neir45

Put speichereDaten auf den $ Bereich zu verwenden .

Quelle

2016-07-07 18:11:23 JonK

auf diese Weise $ scope.saveData = this.saveData(); ? – neir45

@KrystianDrach Nein, Sie müssen saveData nicht zu "this" hinzufügen, nur den $ scope. Stellen Sie außerdem sicher, dass Sie die richtige ng-submit-Syntax anstelle von ngSubmit verwenden. – JonK

Ihre Syntax von ng-submit ist falsch, Sie sollten 'ng-submit = saveData()' verwenden.

Ich empfehle dringend, Scope-Objekte zu initialisieren, die Sie für Ihre Formulare verwenden, indem Sie die ng-model-Anweisung verwenden. In Ihrer send-Methode senden Sie das Objekt als Parameter und senden es an Ihren Service in der Methodendefinition im Controller. So würde der Code wie so sein:

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

Und Ihre speichereDaten() -Methode im Rahmen sein sollte, wie: '$ scope.saveData() = Funktion ....' statt von 'this.saveData()', so dass Sie von Ihrer Ansicht aus darauf zugreifen können.

Und dann ist es nicht notwendig, $ scope.formInfo in Ihrem Controller zu initialisieren.

Quelle

2016-07-07 18:14:07

ok, aber jetzt habe ich diese Art von Fehler in der Konsole: TypeError: Kann Eigenschaft 'FormService' von undefined nicht lesen – neir45

@KrystianDrach sollten Sie FormService direkt aufrufen, nicht als eine Eigenschaft eines Objekts. Können Sie den eigentlichen Code posten? –

Anmerkungen:

ng-controller Attribut ist fehlerhaft;
ngSubmit ist keine gültige Direktive, es ist ng-submit;
Die Funktion saveData() sollte in $scope eingefügt werden, sonst kann sie nicht in Sicht aufgerufen werden.

Hier ist ein Ausschnitt arbeiten, mit allen Fehlern gelöst:

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>

Quelle

2016-07-07 21:44:18 developer033

Einreichen-Anweisung funktioniert nicht AngularJS

Antwort

Verwandte Themen