AngularJS 表单和 $scope 没有相互更新

Question

我正在尝试在 AngularJS（版本 1）中制作一个非常简约的形式。

我正在尝试使用 ng-model 和 $scope 来更新我命名为 fluff 的对象。一旦用户点击提交，就应该在这个 $http 调用中使用它。

我很困惑，我认为 ng-model 会将 this 绑定到范围内的对象。但它总是 returns 空白，因为 $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'
        });

    }

})();

在 chrome 中添加了来自开发者控制台的一些日志：

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;

现在，当我的用户点击提交时，fluff 拥有它需要的所有数据。

AngularJS 表单和 $scope 没有相互更新

AngularJS Form and $scope not updating each other

javascript

angularjs

angularjs-scope

angular-ngmodel

angularjs-ng-model