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

    }

})();

在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 Form和$ scope互不更新

1 个答案: