Question

我开始使用Firebase（AngularFire）来同步我的应用程序的数据。它是Scrum的卡工具，可以将卡添加到阵列中。您可以操作输入字段。

首先，我使用了localStorage，它运行得非常好。现在我基本上实现了Firebase，我遇到了以下问题：在一个字段中键入一个键后，应用程序停止，恢复键入的唯一方法是再次单击输入字段。

你知道为什么吗？非常感谢你提前！

这是我在控制器中的基本实现：

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>

Answer 1

我也碰到了这个。这是因为它重新计算整个数组。以下是我修复它的方法：

将您的输入绑定到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'}}"

其中points是代码出现的数组的类别。

Answer 2

我通过下载最新版本的angularFire.js对这个进行了排序，看起来像bower安装了没有这个修复程序。现在我的contentEditable就是！

在我的AngularFire / AngularJS项目中进行一次击键后，Firebase让我停止输入

2 个答案: