Angularjs 向指令模型关系添加范围

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

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

问题：我编写了一个指令，该指令将检测enter键的按下，然后使用事件数据调用回调函数（用于检测按下enter键时哪个字段处于活动状态）。这太棒了！然而。。。当指令上有

作用域：[method:'&ngEnter']

时，它将终止文本字段和控制器（？？）之间的所有关系。因此，所有文本字段都是空白的（但其他地方（输入除外）的另一个

sub

数据正常工作，因此数据本身是完整和正确的，但当应用到文本字段时，它的行为完全不正常

代码：可在下面找到

指令：输入咖啡

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)
]

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

我的观点。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}}"}

我的控制器。咖啡

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)
]

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

---

更新：似乎

范围

正在被覆盖，我必须找到一种方法来解决这个问题，而不必在我的指令中明确声明范围。

安装Angular UI Utils后，我能够访问

UI按键

，该方法提供了一种对各种按键事件执行回调的简单方法解决方案是编写代码

视图（.haml）：

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

  $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()

控制器（.coffee）：

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

  $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()

---

为什么不看看ngKeypress在指令中创建一个作用域对象会创建一个孤立的作用域，这对ng模型不起作用。@Chandermani:我没有使用ngKeypress，因为我最初遵循了：@Chandermani在我当前版本的angular中，我似乎没有访问

ng keypress

。但是看看这个线索请告诉我提供了一个简单/简单解决方案的Angular UI Utils。谢谢。