[英]AngularJS Form and $scope not updating each other
I am trying to make a very minimalistic form in AngularJS (version 1). 我试图在AngularJS(版本1)中制作一个非常简约的形式。
I am trying to use ng-model and the $scope
to update an object I've named fluff
. 我正在尝试使用ng-model和
$scope
更新我已命名为fluff
的对象。 Once a user clicks submit it should be used in this $http
call. 用户单击提交后,应在此
$http
调用中使用它。
I'm highly confused I thought ng-model would bind this to the object in the scope. 我非常困惑,我认为ng-model会将其绑定到范围中的对象。 But it always returns a blank cause the
$scope.fluff
is not updating. 但是它总是返回空白,因为
$scope.fluff
没有更新。
Yet if I inject {{ fluff.link }}
this will update based on the textbox. 但是,如果我注入
{{ fluff.link }}
它将基于文本框进行更新。
Here is my form in the view: 这是视图中的表单:
<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>
Here is my controller: 这是我的控制器:
(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;
}
});
}
}
})();
Here is my 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 some logs from the developer console in chrome: 从Chrome开发者控制台添加了一些日志:
in submitform FormController {link: "test", desc: "test"}
fluff.form.controller.js:24 form-data Object {link: undefined}
Got it to work! 得到它的工作! Will update with my answer when it allows!
允许时将更新我的答案!
So my problem here is that I wasn't using the form
controller like I should have. 所以我的问题是我没有像应该使用的那样使用
form
控制器。
Here I have the template being loaded with the controller as form
. 在这里,我将模板与控制器一起加载为
form
。
$routeProvider.when('/', {
templateUrl: 'views/index.client.view.html',
controller: 'FormController',
controllerAs: 'form'
});
In the template I have to use 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>
then in the controller I create a this
object: 然后在控制器中创建一个
this
对象:
var vm = this;
vm
is now linked to form. vm
现在已链接到表单。
So now I can do this: 所以现在我可以这样做:
var fluff = {};
fluff.link = form.link;
fluff.description = form.desc;
Now fluff has all the data it needs when my user clicks submit. 现在,当我的用户单击“提交”时,fluff拥有了所需的所有数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.