Question

目标：提供一系列文字字段，当您选择它并按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被覆盖了，我必须找到解决方法，而无需在我的指令中明确声明范围。

Answer 1

安装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()

向指令添加范围会导致模型关系丧失

1 个答案: