Angular: Directive to provide a textarea which validates json

http://angularjs.org/

by justinwyllie

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    
    <div ng-bind="obj.prop"></div>

    <form ng-submit="formSubmitter()">
        <input type="text" name="name" id="name" ng-model="name">   
        <div jsonField="xx" json-textarea></div>
            <button>Submit</button>
    </form>    
     
        
        
</div>

CSS

.validationField
{
    min-height: 200px;
    border: 1px solid #000000;
}

JavaScript

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

myApp.directive('jsonTextarea', function() {
    return {
        restrict: 'AE',
        //isolate scope
        scope: {
            jsonField: '=jsonField'
        },
        template: '<div class="validationField" id="jsonValidationField" contenteditable>' + $scope.jsonField + '</div>'
    };
});




myApp.controller('MyCtrl', function ($scope) {
    $scope.obj = { prop: "JSON Validator" };
    $scope.jsonField = '{}'
    
    $scope.formSubmitter = function() {
        	
    	    console.log("Sending form with data: " + $scope.name + $scope.jsonField)
            return false;
    }    
    
    
    

});