

タイトルの通りです。質問させてください。EnterキーとBackspaceキーでのfocusの移動に対応した、textareaのディレクティブをつくっています。  
textareaで入力したあと、Enterキーを押すとitemを保存して次のelementにfocusを移動、texttareaが空のときのみBackspaceキーを押すとitemを保存して前のelementにfocusを移動させる、ということをさせたいのですが詰まってしまって困っています...
見づらいコードですみませんがよろしくお願いいたします。

## view(slim):

[code]

    ul.section-list ng-repeat="content in shop.contents"
      li.section ng-repeat="item in content.items"
        div
          textarea name="body" my-directive="" ng-model="item.body" ng-blur="itemSave(shop, content, item)" 
    
[/code]

## javascript(angular):

[code]

    angular.module('myDirective', []).directive 'myDirective', ->
      {
        restrict: 'A'
        require: '?ngModel'
        link: (scope, element, attrs, ngModel) ->
          el = angular.element(element[0])
    
          el.on 'keypress', (e) ->
            if e.keyCode == 13  #Enterキーが押されたとき
              el.blur()
              # Enterキーで確定して次の要素に移りたい...
              angular.element(element[0+1]).focus()  #error
              return
            return
    
          el.on 'keydown', (e) ->
            if e.keyCode == 8  #Backspaceキーが押されたとき
              if scope.content.items[scope.$index].body == ''  #textareaが空のとき
                el.blur()
                # Backspaceキー確定して前の要素に移りたい...
                angular.element(element[0]).focus()  #error
                return
              return
            return
      }
    
[/code]


CC BY-SA 3.0
2015-11-04T11:55:07.417
18403
2015-11-04T13:14:10.597
10441
question
javascript angularjs coffeescript
Enterキーで次のtextaeraに、Backspaceキーで前のtextareaにfocusを移したいです


ディレクティブを並列操作する時は親となるディレクティブを用意するとうまくいきます。  
<https://jsfiddle.net/4c1t7v42/>

ちなみに、`link()`の第2引数は`angular.element`オブジェクトですので、  
`var el = angular.element(elem[0]);`  
のような処理は不要です。

[code]

    angular.module('app', [])
    .controller('AppController', function() {
      this.items = ['aaa', 'bbb', 'ccc', 'ddd'];
    })
    .directive('parent', function() {
      return {
        restrict: 'AE',
        transclude: true,
        template: '<ng-transclude></ng-transclude>',
        scope: {
        },
        controller: function($scope) {
          var children = [];
          this.addChild = function(elem) {
            children.push(elem);
          };
          this.removeChild = function(elem) {
            var index = children.indexOf(elem);
            if (index !== -1) {
              children.splice(index, 1);
            }
          }
          this.next = function(elem) {
            var index = children.indexOf(elem);
            if (index !== -1) {
              children[(index + 1) % children.length].focus();
            }
          };
          this.prev = function(elem) {
            var index = children.indexOf(elem);
            if (index !== -1) {
              children[(index + children.length - 1) % children.length].focus();
            }
          };
        },
      };
    })
    .directive('child', function() {
      function save(elem) {
        // データ保存のためのコード
      }
    
      return {
        require: '^^parent',
        restrict: 'A',
        scope: {
        },
        link: function(scope, elem, attrs, parent) {
          parent.addChild(elem);
          scope.$on('$destroy', function() {
            parent.removeChild(elem);
          });
          elem.on('keypress', function(e) {
            if(e.keyCode === 13){
              save(elem);
              parent.next(elem);
              return false;
            }
          });
          elem.on('keydown', function(e) {
            if(e.keyCode === 8 && elem.val().length === 0) {
              save(elem);
              parent.prev(elem);
              return false;
            }
          });
        }
      };
    });
[/code]

[code]

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    
    <div ng-app="app" ng-controller="AppController as app">
      <ul parent>
        <li ng-repeat="item in app.items">
          <textarea child ng-model="item" cols="30" rows="10"></textarea>
        </li>
      </ul>
    </div>
[/code]


CC BY-SA 3.0
2015-11-04T13:14:10.597
18405
2015-11-04T13:14:10.597
8532
18403
answer