AngularJS Form и $ scope не обновляются друг друга

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.

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

В шаблоне я должен использовать 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; 

Теперь пух имеет все данные ему нужно, когда мой пользователь нажимает кнопку.