Busted Angular Text Area for Big Text

Angular version of Popup thingy for showing a small amount of text but have it balloon out on mouseover.. readonly for mouseover, but textarea/editablt if you click it.

by michaeldausmann

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>

<div ng-controller="mycontroller">
    text goes here... {{myValue}}
</div>

<!--input box plus an 'explode' button that pops the larger edit dialog-->
<div id="inputContainer">
    <input 
    id="smallText" 
    value="This is some text which is too big for editing in a small textbox." 
    title="This is some text which is too big for editing in a small textbox.">
    </input>
    <button id="explode">...</button>
</div>

<!--Larger edit dialog containing a textarea for dealing with big text-->
<div id="editDialog">
    <textarea height="100%">This is some text which is too big for editing in a small textbox.</textarea>
</div>

CSS

</style>

<!--jquery ui does its ui magic-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />


<style>    
    textarea {
      width: 100%; /* make the text area fill the whole dialog */
      height: 100%;
      margin: 0; /* don't want to add to container size */
      border: 0; /* don't want to add to container size */
      resize: none; /* resize is delegated to the dialog */  
    }
    
    .noTitle .ui-dialog-titlebar {display:none} /* don't show the dialog titlebar */
    
    .ui-widget { font-size: 10px; }  /* default ui widget font is 1em, make it less chunky */

</style>

JavaScript

function mycontroller($scope) {
    $scope.myData = {myValue:"This is some text which is too big for editing in a small textbox." };
};


//turn the editDialog div into a hidden dialog to be opened with the 'explode' button
/*
$("#editDialog").dialog({
    title: "myValue",  //not shown
    autoOpen: false,
    height: 140,
    width: 350,
    dialogClass: 'noTitle',
    position: {
        my: "left top",
        at: "left bottom",
        of: $("#inputContainer")
    },
    buttons: {
        Close: function() {
            $(this).dialog("close");
        }
    }
});

//use the button as a toggle for the dialog
$("#explode").click(function() {
    if ($("#editDialog").dialog("isOpen")) {
        $("#editDialog").dialog("close");
    } else {
        $("#editDialog").dialog("open");
    }
})
    
angular.module('myApp.directives', [])
  .directive('inputsplosion', function($compile) {
    return {
        link: function(scope, elm, attrs, ctrl) {
            var dragStartExp = attrs.jquiDraggable || '';
            var dragStart = evalFn(elm, scope, dragStartExp);
            var token;    //local copy of the token
            elm.draggable({
//                snap: true,
                start: function(event, ui){
                    //'load' the dragged element with a token linking it to its angular scope
                    elm.data('jqui-dnd-item-token', token=dragStart());
                    
                    console.log('drag start');
                    console.log('ui:' + JSON.stringify(ui));
//                    console.log('event:' + JSON.stringify(event));
                },
                drag: function(event, ui){
                    //console.log('drag');
                },
                stop: function(event, ui){
                    console.log('stop');
                }
                
            });
        }
    };
})    
    
    
*/