Jam*_*ies 10 javascript data-binding promise angularjs
我试图从AngularJs(1.0.7)中的promise中返回单个记录,并将结果绑定到表单.表单绑定正确,但输入字段是只读的 - 我无法编辑值.
相反,如果我将记录包装在一个数组中并使用ng:repeat进行迭代,则表单正确绑定,我可以编辑值.
我已经创建了一个能够清楚地说明问题的plnkr:
http://embed.plnkr.co/fOWyhVUfekRbKUSRf7ut/preview
您可以编辑直接绑定和列表绑定输入字段,但是无法编辑绑定到单个promise的字段.
是否可以将ng:model直接绑定到promise的返回对象,或者我是否需要使用数组才能使其工作？
app.controller('MainCtrl', function($scope, $timeout, $q) {
var person = {"name": "Bill Gates"}
var deferList = $q.defer();
var deferSingle = $q.defer();
// Bind the person object directly to the scope. This is editable.
$scope.direct = person;
// Bind a promise to the scope that will return a list of people. This is editable.
$scope.list = deferList.promise;
// Bind ap romise to the scope that will return a single person record. This is *not* editable.
$scope.single = deferSingle.promise;
// Resolve the promises
$timeout( function(){
deferList.resolve( [person] ); // Array
deferSingle.resolve( person ); // Just the record itself
}, 100);
});
<body ng-controller="MainCtrl">
Directly Bound - This field is editable
<input ng:model="direct.name"/>
<hr/>
Singleton Promise - This field is *not* editable.
<input ng:model="single.name"/>
<hr/>
List Promise: - This field is editable
<div ng:repeat="person in list">
<input ng:model="person.name"/>
</div>
</body>
编辑:经过一些调试后,我发现ng:model指令正在读取 promise的值('$$ v')组件,但直接写入promise对象本身.
在尝试编辑promise时,ViewModel会一直恢复到原始值,同时在promise本身上存储字符.因此,如果用户在输入字段中键入"asdf",则结果如下.
{Name: "Asdf", $$v: {Name: "Bill Gates"}}
而我们应该期待
{$$v: {Name: "asdf"}}
我做错了什么,或者这可能是AngularJS中的一个错误？
(为了进一步说明,问题是数组与promise返回的对象之间的行为差异.直接绑定只是作为控件)
UPDATE
似乎AngularJS 1.0.3已经引入了这个问题:http: //jsfiddle.net/sonicsage/k8W4Y/6/
如果你切换到AngularJS 1.0.2,它会工作.
在GitHub上有一个未解决的问题:https://github.com/angular/angular.js/issues/1827
Google网上论坛的原始帖子.
还有一个关于自动解包的有趣线程:https: //github.com/angular/angular.js/pull/1676
通过在Chrome控制台中调试应用程序,您可以看到这single是一个函数(承诺):
> $('body.ng-scope').data('$scope').single
Object {then: function, $$v: Object}
$$v: Object
then: function (b,g){var j=e(),h=
__proto__: Object
虽然direct是一个对象:
> $('body.ng-scope').data('$scope').direct
Object {name: "Bill Gates", $$hashKey: "004"}
但是,按下只读输入上的按键会对promise例如选择所有文本和删除它有影响,尽管对UI没有影响,但对属性有影响:
> $('body.ng-scope').data('$scope').single.name
""
您可以在此处进一步调试应用程序:http://run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/
编辑
不支持IMO直接将字段绑定到字段(这是正式记录的吗？),更改代码如下:
// Bind ap romise to the scope that will return a single person record. This is *not* editable.
deferSingle.promise.then(function(data) {
$scope.single = data;
}, function(data) {
// error
});
以下是plunker:http: //run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/