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!

Answer 1

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

Answer 2

you ca also use $timeout to notify angular of your changes such as

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

    label.bind("click", textbox);

   function textbox() {
     $timeout(function() {
       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
 };
});