1

アプリケーションのデータを同期するために、Firebase (AngularFire) の使用を開始しました。配列にカードを追加するスクラム用のカード ツールです。入力フィールドを操作できます。

最初に localStorage を使用しましたが、これは非常にうまく機能しました。基本的に Firebase を実装したので、次の問題が発生しました。1 つのフィールドに 1 つのキーを入力した後、アプリケーションが停止し、入力を再開する唯一の方法は、入力フィールドをもう一度クリックすることです。

これがなぜなのか知っていますか？事前にどうもありがとうございました！

それが私のControllerでの基本的な実装です:

Card = (@color, @customer, @points, @number, @projectName, @story) ->

        $scope.cards = []
        reference = new Firebase("https://MYACCOUNT.firebaseio.com/list")
        angularFire(reference, $scope, "cards")

        $scope.reset = ->
            $scope.cards = []

        $scope.addCardRed = (customer) ->
            $scope.cards.push new Card("red", customer)

それが私のマークアップです：

<div class="card card-{{ card.color }}">
    <header>
        <input class="points" contenteditable ng-model="card.points"></input>
        <input class="number" placeholder="#" contenteditable ng-model="card.number"></input>
        <input class="customerName"  contenteditable ng-model="card.customer.name"></input>
        <input class="projectName" placeholder="Projekt" contenteditable ng-model="card.projectName"></input>
    </header>
    <article>
        <input class="task" placeholder="Titel" contenteditable ng-model="card.task"></input>
        <textarea class="story" placeholder="Story" contenteditable ng-model="card.story"></textarea>
    </article>
    <footer>
        <div class="divisions">
            <p class="division"></p>
            <button ng-click="deleteCard()" class="delete">X</button>
        </div>
    </footer>
</div>
<div class="card card-{{ card.color }} backside">
    <article>
        <h2 class="requirement">Requirements</h2>
        <textarea class="requirements" placeholder="Aspects" contenteditable ng-model="card.requirements"></textarea>
    </article>
</div>
4

2 に答える 2

2

私もこれに遭遇しました。これは、配列全体を再計算しているためです。これが私がそれを修正した方法です：

入力をにバインドし、このディレクティブng-modelも追加しますfocus

<input class="list-group-item" type="text" ng-model="device.name" ng-change="update(device, $index)" ng-click="update(device, $index)" ng-repeat='device in devices' focus="{{$index == selectedDevice.index}}" />

私はselectedDeviceこのように設定します

$scope.update = function(device, index) {
  $scope.selectedDevice = device
  $scope.selectedDevice.index = index
}

このディレクティブを作成します。

angular.module('eio').directive("focus", function() {
  return function(scope, element, attrs) {
    return attrs.$observe("focus", function(newValue) {
      return newValue === "true" && element[0].focus();
    });
  };
});

更新遅れて申し訳ありませんが、傾向があることがいくつかありました。

これが機能する理由は、現在選択している配列内のアイテムのインデックス値を常に保存しているためです。フォーカスが失われると、そのインデックスに移動することでフォーカスがすぐに返されます。

ただし、複数の配列について話している場合は、setSelectedコードをリファクタリングして、それがどの配列であるかを示す必要があります。

だからあなたは変えたいと思うでしょう

focus="{{$index == selectedDevice.index}}"

のようなものに

focus="{{$index == selectedDevice.index && selectedDevice.kind == 'points'}}"

Wherepointsは、コードが表示される配列のカテゴリです。

于 2013-10-20T20:11:40.773 に答える