Angular: Empty Fiddle

http://angularjs.org/

by Adrian Moisa

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <replybox label="my label"></replybox>
</div>

JavaScript

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

myApp.directive('replybox', function($rootScope) {
    var linkFn = function(scope, element, attrs) {
        var label = angular.element(element.children()[0]);
        scope.showInput = false;

        label.bind("click", textbox);

        function textbox() {
            console.log('click');
            scope.$apply('showInput = true');
        }
    };
    return {
        link: linkFn,
        restrict: 'E',
        scope: {
            label: '@'
        },
        template: '<a ng-hide="showInput">{{label}}</a><textarea ng-show="showInput"></textarea>',
        transclude: true
    };
})

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}