AngularJS custom directive ng-show/ng-hide
===

Warning: Angular newbie ahead.

I'm trying to create a custom widget that will show by default a "Reply" link, and when clicked, it should be hidden and a textarea should be shown. Here is what I have so far, but it doesn't work::


      .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() {
                scope.showInput = true;
            }
        };
        return {
            link:linkFn,
            restrict:'E',
            scope:{
                id:'@',
                label:'@',
                showInput:'='
            },
            template:'<a ng-hide="showInput">label</a><textarea ng-show="showInput">    </textarea>',
            transclude:true
        };
    })


Any guideline will be appreciated. Thanks!

