1

我开始使用 Firebase (AngularFire) 为我的应用程序同步数据。它是 Scrum 的卡片工具，可将卡片添加到数组中。您可以操作输入字段。

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

你知道这是为什么吗？非常感谢您！

这是我在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 回答
1

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

于 2013-11-05T13:25:59.007 回答