Big Text Directive with AngularJS

Use AngularJS and jquery to make an input with a popup textarea for editing large text values

by Kalyan Parsi

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
    
     <input type="radio" id="radio3" ng-model="selectedOption" ng-click="toggle($event)" value="numbers" checked="checked" />
    <label for="radio3">One</label>
    <input type="radio" id="radio4" ng-model="test2" ng-click="toggle($event)" value="two" />
    <label for="radio4">Two</label>
    
    
        <input type="text" field="bigText" big-text></input>
         
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);

function Ctrl($scope) {
    $scope.selectedOption = "";
}

app.directive('bigText', function() {
    return {
        restrict: 'A',
        scope: {  field: '='  },
        replace: true,
              link: function(scope, elm, attrs) {
      	elm.bind("keypress", function (event) {
            // deal with unicode character sets
            var unicode = event.charCode ? event.charCode : event.keyCode;
            // always allow the following keypresses
            // 8 = backspace
            // 9 = tab
            // 13 = enter
            // 16 = shift
            // 37 = left arrow, NOTE: removed this control char as this is treated as %
            // 39 = right arrow, NOTE: removed this control char as this is treated as '
            if (unicode === 8 || unicode === 9 || unicode === 13 || unicode === 16) {
                // allow the keypress
                return true;
            }
            var char = String.fromCharCode(unicode);
           if(char==="a"){
           return true;
           }
            // deny the keypress
            return false;
        });      

        }
    };
});