Big Text Directive with AngularJS

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

by michaeldausmann

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="text" field="bigText" big-text></input>
        <input type="text" field="moreBigText" big-text></input>
        <h1>bigText: {{bigText}}</h1>        
        <h1>moreBigText: {{moreBigText}}</h1>        
    </div>
</div>

JavaScript

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

function Ctrl($scope) {
    $scope.bigText = "This is some text which is too big for editing in a small textbox.";
    $scope.moreBigText = "Even more big text.  Need to make sure that multiple instances work.";
}

app.directive('bigText', function() {
    return {
        restrict: 'A',
        scope: {  field: '='  },
        replace: true,
        template: '<span><input type="text" ng-model="field" title="{{field}}"></input><button>...</button><div><textarea height="100%" ng-model="field">{{field}}</textarea></div></span>',
        link: function(scope, element, attrs) {
            $(element).children('button').bind('click', function(e) {
                $(e.target).siblings('div').toggle();  //toggle visibility
            });

            //hide the textarea div initially
            $(element).children('div').hide();

            //position the textarea div under the input
            var pos = $(element).position();
            $(element).children('div').css({
                position: "absolute",
                top: (pos.top + pos.height) + "px",
                left: pos.left + "px"
            });

        }
    };
});