0

目标：提供一系列文本字段，当您选择它并按 Enter 键时，它将添加一个新的文本字段（如果您在最后一个字段中按 Enter）或关注下一个字段（如果您按 Enter在任何其他领域）。

想法：使用检测回车键按下的指令将触发对原始控制器的回调，该控制器将能够执行必要的任务。理想情况下，该指令将能够在其他地方使用除上述下一个/新文本字段目标之外的其他操作。

问题：我编写了检测回车键按下的指令，然后将使用事件数据调用回调函数（用于检测按下回车键时哪个字段处于活动状态）。这很好用！ 但是...当指令中出现时，它会终止文本字段和控制器(??)scope: [method: '&ngEnter']之间的所有关系。因此，所有文本字段都是空白的（但在其他地方（除了输入之外的任何地方）找到的其他数据都可以正常运行，因此数据本身是完整且正确的，但是当应用于文本字段时，它会表现得很糟糕。sub

代码：在下面找到...

指令：ng_enter.coffee

angular.module('app.common').directive "ngEnter", ['$parse', ($parse) ->
  restrict: 'A'
  scope:
    method: '&ngEnter'
  link: (scope, element, attrs) ->
    expressionHandler = scope.method()
    element.bind "keydown keypress", (event) ->
      if event.which is 13
        event.preventDefault()
        scope.$apply ->
          expressionHandler(event)
]

my_view.haml

.item-list.sub-item-list.bordered-background
  .item-row(ng-repeat='sub in categoryEditor.categorizations' ng-hide='sub._destroy')
    %div
      %input.left{type: 'text', "ng-model"=>"sub.name", style: 'width: 85%; margin: 0 0 0 1px;', 'ng-enter' => 'subitemEnter'}
      %i.icon-large.right.icon-remove{"ng-click"=>"removeSubItem(sub)", title: "{{sub.name}}"}

my_controller.coffee

angular.module('app.admin.controllers').controller 'MyControllerCtrl', ['$scope', ($scope) ->
  $scope.categoryEditor = {...}
  $scope.subitemEnter = (event) ->
    console.log "subitemEnter() Triggered"
    console.log event

更新：似乎scope正在被覆盖，我必须找到一种方法来解决这个问题，而无需在我的指令中明确声明范围。

4

1 回答 1

0

安装 Angular UI Utils，我能够访问它ui-keypress，它提供了一种对各种按键事件执行回调的简单方法。以下代码是解决方案。

查看（.haml）：

%input{type: 'text', "ng-model"=>"sub.name", 'ui-keypress' => "{13:'subItemEnterPress($event)'}"}

控制器（.coffee）：

  $scope.subItemEnterPress = (event) ->
    event.preventDefault()
    inputs = $(event.target).closest('.item-list').find('input')
    if event.target == _.last(inputs)
      $scope.addSubItem()
    else
      $(inputs[ _.indexOf(inputs, event.target) + 1 ]).focus()
于 2013-10-14T18:10:22.650 回答