Question

也许我对可重复使用的指令想法过于苛刻，但我已经被要求在不到两周的时间内为我的公司做一个演示，所以我瞄准的目标比正常情况高。

我建立在我问的另一个问题之上，并在此回答： Angular to do list directive

我添加了一些新功能，例如＆＃34;点击编辑＆＃34;。

这是我的plnkr

以下是有效的：

点击修改

以下是我遇到的问题：

从下拉列表
自动对焦物体以强制输入具有焦点，因此我可以真正捕捉模糊

接下来的问题是：

我如何知道我要更新哪个对象以发送回服务器？

我周日花了一整天时间试图让这些任务发挥作用，但都失败了。我清理了大部分失败尝试的代码。

我确实想在每次编辑字段时保存记录。我知道我正在更新对象，我觉得它很漂亮，但我不知道触发什么来将对象发送回服务器。也许这就是jQuery背景的说法？

谢谢，杜安

Answer 1

要从下拉列表中显示文字而非ID：：

您可以在循环选项的指令中创建一个函数，并在name与您绑定的值匹配时返回id。例如：

scope.statusText = function(){
  var text = '';
  angular.forEach(scope.statusOptions, function(item){
    if(item.id == scope.task.status)
        text = item.name;
    });
    return text;
}

自动对焦元素

在指令中创建一个函数，该指令在＆＃34;显示＆＃34;的ng-click上调用。跨度。这将设置scope.editStatusMode = true，然后在元素上调用.focus。

scope.setStatusFocus = function(){
  scope.editStatusMode = true;
  var el = element.find('select');
  $timeout(function(){
    el.focus();
  });
};

将el.focus()包裹在$timeout中会延迟调用焦点，直到DOM完成呈现。 HTML看起来像这样：

<span ng-hide="editStatusMode" ng-click="setStatusFocus()" ng-bind="statusText()"></span>

您如何知道自己要更新的对象

在指令中创建update()函数，该函数绑定到＆＃39; ng-blur . In that function, you can access scope.task`，您可以将其发送到服务器进行保存。

scope.update = function(){
  scope.editPriorityMode = false;
  //Save scope.task here.
  console.log(scope.task);
}

适用于description和priority。它不适用于status，因为当您更改状态时，它会立即从其所在的列表中消失并添加到其他列表中，并且blur事件永远不会被触发。要处理status，您可以在$watch上创建task.status，然后从那里调用update()函数。

scope.$watch('task.status', function(oldValue, newValue){
  scope.update();
})

Plunker

Answer 2

由于您有多个问题，我会回答我的问题，然后使用其他答案进行编辑：

从下拉列表中显示文本而非ID：此问题有不同的解决方案。您可以使用简单的lodash方法来查找您选择的ID的值（_.find(priorityOptions, {value: task.priority})）。您实际上可以将(id, name)对保存在ngModel（task.priority）内，这样您就可以参考搜索范围内的task.priority.name。

自动对焦对象以强制输入具有焦点，因此我可以捕捉模糊：您可以在处理该行为的范围内调用ng-click内的函数并确保焦点将是输入字段，并且当您单击时也会绑定模糊事件。

如何知道我要更新哪个对象以便发送回服务器：如果您想在模糊字段时将更改发送到服务器（顺便说一下，您可以简单地将属性ng-blur="update()"添加到输入元素中），您可以访问您所在元素的scope（scope.task）并通过{{1}发送它方法。

具有DropDown列表的AngularJs指令

2 个答案: