AngularJS custom directive ng-show/ng-hide

Question

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!

Solution

Matias, here is a working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

There were number of things going on really, but I think that the most important one was the fact that you need to use Scope.$apply to have angular notice scope changes from 'outside of anular's world'. By default angular doesn't trigger templates re-evaluation on each and every DOM event so you need to wrap it into apply:

scope.$apply('showInput = true');

More info here: http://docs.angularjs.org/api/ng.$rootScope.Scope

There are also other items worth noticing in your example:

• I guess you would like to be able to pass 'label' as an attribute to your directive and then use it in your template - if so you need to use {{label}} expression
• I wasn't quite sure what would be the use for the 'id' attribute so omitted it from my fiddle
• Same for the 'showInput' - couldn't quite figure out what is the thing you are trying to get

Comments

[honzajde]

May I ask for a complete example?

[pkozlowski.opensource]

@user271996 There is a jsFiddle with a complete example attached to the answer. Do you still miss anything?

[Daniel Lo Nigro]

You can probably bind the label click function via ng-click in the template instead of manually attaching it in the link function.