

はじめまして。質問させていただきます。現在、angularを採用したprojectで以下のような、textareaをdirectiveをつくり実装しています。ベーシックなtextareaとは異なり、値を入力してEnterキーを押すとformをsubmitさせる処理を与えたいと思っています。試行錯誤していますが解決できず困っています。inputでは文章がかなりはみ出てしまい、どうしてもtextareaでsubmitさせたいです。どうかよろしくお願いいたします

===

/assets/javascripts/directives/resizeTextarea.coffee

[code]

    mod.directive 'resizeTextarea', ->
      {
        restrict: 'A'
        require: '?ngModel'
        link: (scope, element, attrs, ngModel) ->
          HEIGHT = 25
          el = angular.element(element[0])
          el.css 'lineHeight', HEIGHT + 'px'
          el.css 'height', HEIGHT + 'px'
    
          resize = (e) ->
            textHeight = e.target.scrollHeight
            height = ~ ~(textHeight / HEIGHT) * HEIGHT
            el.css 'height', height + 'px'
            return
    
          el.on 'input', resize
          scope.$watch attrs.ngModel, (value) ->
            if value == undefined
              return
            textHeight = el[0].scrollHeight
            height = ~ ~(textHeight / HEIGHT) * HEIGHT
            el.css 'height', height + 'px'
            return
          ngModel.$parsers.unshift (viewValue) ->
            viewValue
          return
      }
    
[/code]


CC BY-SA 3.0
2015-07-09T18:14:33.973
12224
2015-07-10T10:33:34.777
10441
question
javascript angularjs coffeescript
Enterキーで値がsubmitされるtextareaのdirective


<http://qiita.com/ikm/items/4fc4450ed8eb213039d8>  
keypressでEnterが押されたか確認し、FormのSubmitを行えば良いと思います。

angularで書いた場合のサンプルを作りましたので参考にして下さい。

[code]

    var app = angular.module('app',[]);
    app.controller("ctrl", function($scope){
      $scope.text = "init";
    });
    
    app.directive('enterSubmitForm', function(){
        return{
            controller: function($scope, $element){
                this.submit = function(){
                    $element[0].submit();
                }
            }
        }
    });
    app.directive('enterSubmit', function($rootScope){   
      return{
        require: '^enterSubmitForm',
        link: function($scope, $element, attrs, ctrl){
            $element.on('keypress', function(e){
                if (e.keyCode == 13) {
                   $rootScope.$apply(function(){
                      ctrl.submit();
                   });
                }
            });
        }
      };                                                                
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <div ng-app="app" ng-controller="ctrl">
      <form enter-submit-form>
         <textarea ng-model="text" enter-submit></textarea>
       </form>
    </div>
[/code]


CC BY-SA 3.0
2015-07-09T23:59:35.630
12231
2015-07-10T10:33:34.777
2015-07-10T10:33:34.777
4191
4191
12224
answer