10

AngularJs (1.0.7) の promise から単一のレコードを返し、結果をフォームにバインドしようとしています。フォームは正しくバインドされますが、入力フィールドは読み取り専用です。値を編集できません。

代わりに、配列でレコードをラップし、ng:repeat を使用して反復すると、フォームが正しくバインドされ、値を編集できます。

問題を明確に示すplnkrを作成しました：

http://embed.plnkr.co/fOWyhVUfekRbKUSRf7ut/preview

直接バインドされた入力フィールドとリスト バインドされた入力フィールドを編集できますが、単一の promise にバインドされたフィールドは編集できません。

promise から返されたオブジェクトに ng:model を直接バインドすることは可能ですか?これを機能させるには配列を使用する必要がありますか?

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 オブジェクト自体に直接書き込んでいることがわかりました。

プロミスを編集しようとすると、ビューモデルはプロミス自体に文字を保存しながら、元の値に戻され続けます。したがって、ユーザーが入力フィールドに「asdf」と入力すると、結果は次のようになります。

{Name: "Asdf", $$v: {Name: "Bill Gates"}}

代わりに期待するべきですが

{$$v: {Name: "asdf"}}

私は何か間違ったことをしていますか、それとも AngularJS のバグである可能性がありますか?

(さらに明確にするために、問題は配列とプロミスによって返されるオブジェクトの動作の違いです。直接バインディングは単にコントロールとして存在します)

4

1 に答える 1

8

アップデート

この問題は 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

singleChrome コンソールでアプリケーションをデバッグすると、それが関数 (約束) であることがわかります。

> $('body.ng-scope').data('$scope').single
Object {then: function, $$v: Object}
$$v: Object
then: function (b,g){var j=e(),h=
__proto__: Object

Whiledirectはオブジェクトです:

> $('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/

編集

promise をフィールドに直接バインドする 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
  });

これがプランカーです：http://run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/

于 2013-06-02T13:52:15.200 に答える