AngularJSフォームと$スコープが互いに更新されない

Question

AngularJS（バージョン1）で非常に最小限のフォームを作成しようとしています。

ng-modelと$scopeを使用して、私がfluffという名前のオブジェクトを更新しようとしています。ユーザーが送信をクリックすると、この$httpコールで使用する必要があります。

私は非常に混乱しています。私はng-modelがこれをスコープ内のオブジェクトにバインドすると考えました。しかし、それは常に$scope.fluffが更新されていない空白の原因を返します。

ただし、私が{{ fluff.link }}を注入すると、これはテキストボックスに基づいて更新されます。ここで

は、ビューに私のフォームである：ここでは

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

は私のコントローラである：ここでは

(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; 
       } 

      }); 

     } 


    } 

})(); 

は私のルートです：

(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' 
     }); 

    } 

})(); 

は、開発者コンソールから、いくつかのログを追加しましたクロム：

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

これは機能しました。それが許せば私の答えで更新されます！

Answer 1

ここで私の問題は、私が持っているようにコントローラformを使用していないということです。

ここでは、コントローラにロードされているテンプレートをformとしています。

Iは formを使用する必要がテンプレートに

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

：

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

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

は、私は作成コントローラにthisオブジェクト：

var vm = this; 

vm

次に形成するように結合されます。

は、だから今、私はこれを行うことができます。

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

今綿毛が私のユーザーがクリックを提出したときに、それは必要なすべてのデータを持っています。