AngularJS Form und $ scope aktualisieren sich nicht gegenseitig

Question

Ich versuche, eine sehr minimalistische Form in AngularJS (Version 1) zu machen.

Ich versuche, ng-Modell und die $scope zu verwenden, um ein Objekt zu aktualisieren, das ich fluff genannt habe. Sobald ein Benutzer auf "Senden" klickt, sollte er in diesem $http Aufruf verwendet werden.

Ich bin sehr verwirrt ich dachte, ng-model würde dies an das Objekt im Bereich zu binden. Aber es gibt immer eine leere zurück, weil die $scope.fluff nicht aktualisiert wird.

Aber wenn ich injiziere {{ fluff.link }} wird dies basierend auf der Textbox aktualisiert.

Hier ist meine Form in der Ansicht:

<form name="fluffForm" ng-submit="submitform()"> 
     <span>Link: <input type="text" name="link" ng-model="form.link"></span> 
    <span>Description: <input type="text" name="description" ng-model="form.desc"></span> 
     <button type="submit">submit</button> 

    </form> 
</div> 

Hier mein Controller ist:

ist

(function(){ 

    'use strict'; 

    angular.module('fluff').controller('FormController', FormController); 


    FormController.$inject = ['$scope', '$rootScope', '$routeParams', '$window', '$http']; 


    function FormController($scope, $rootScope, $routeParams, $window, $http){ 

     var form = this; 
     $scope.fluff = {}; // form data in json object(?) to be posted to mongo database 
     $scope.submitform = function(){ 
      $scope.fluff.link = form.link; 
      $scope.fluff.description = form.desc; 
      console.log('form-data', $scope.fluff); 
      $http({ 
       method: 'POST', 
       url: 'http://fluff.link/share', 
       data: $scope.fluff, 
       headers: {'Content-type': 'application/x-www-form-urlenconded'} 
      }).success(function(data){ 
       console.log('Call to API was successful'); 
       if(data.errors){ 
        console.log('Data Errors'); 
        console.log('error:', $data.errors.name); 
        //show errors - part of the response in the REST API have to make this portion up myself 
        $scope.errorName = $data.errors.name; 

       } else { 
        console.log('returned share id', data); 
        var fluff = 'fluff/link/'+ data; 
        $window.location.href = fluff; 
       } 

      }); 

     } 


    } 

})(); 

Hier meine Route:

(function(){ 

    'use strict'; 

    angular.module('fluff').config(Config); 

    Config.$inject = ['$routeProvider']; 

    function Config($routeProvider){ 

     $routeProvider.when('/', { 
      templateUrl: 'views/index.client.view.html', 
      controller: 'FormController', 
      controllerAs: 'form' 
     }); 

    } 

})(); 

Added einige Protokolle von der Entwicklerkonsole in chrom:

in submitform FormController {link: "test", desc: "test"} 
fluff.form.controller.js:24 form-data Object {link: undefined} 

Es hat funktioniert! Wird mit meiner Antwort aktualisiert, wenn es erlaubt!

Answer 1

Also mein Problem hier ist, dass ich nicht den form Controller wie ich verwenden sollte.

Hier habe ich die Vorlage geladen mit dem Controller als form.

$routeProvider.when('/', { 
     templateUrl: 'views/index.client.view.html', 
     controller: 'FormController', 
     controllerAs: 'form' 
    }); 

In der Vorlage Ich habe form zu verwenden:

<span>Link: <input type="text" name="link" ng-model="form.link"></span> 

<span>Description: <input type="text" name="description" ng-model="form.desc"></span> 

dann in der Steuerung erstelle ich ein this Objekt:

var vm = this; 

vm ist jetzt bilden verknüpft.

So, jetzt kann ich dies tun:

var fluff = {}; 
    fluff.link = form.link; 
    fluff.description = form.desc; 

Jetzt Flaum die Daten alle braucht es hat, wenn meine Benutzer klickt einreichen.