Directiva personalizada AngularJS ng-show/ng-hide

Question

Advertencia: novato angular adelante.

Estoy tratando de crear un widget personalizado que mostrará de forma predeterminada un enlace de "Responder", y cuando se haga clic en él, debe estar oculto y debe mostrarse un área de texto. Esto es lo que tengo hasta ahora, pero no funciona ::

.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 
    }; 
}) 

Cualquier directriz será apreciada. ¡Gracias!

Answer 1

Matias, aquí es un jsFiddle de trabajo: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

Había varias cosas que están pasando realmente, pero creo que el más importante fue el hecho de que es necesario utilizar Ámbito $ aplicará a tener aviso angular. el alcance cambia de 'fuera del mundo de anular'. Por defecto angular no desencadena plantillas de re-evaluación de cada evento DOM por lo que necesita para envolver en aplicar:

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

Más información aquí: http://docs.angularjs.org/api/ng . $ rootScope.Scope

también hay otros elementos que vale la pena notar en su ejemplo:

• supongo que le gustaría ser capaz de pasar la 'etiqueta' como un atributo a su directiva y luego usarlo en su plantilla; si es así, debe usar {{label}} expresión
• No estaba seguro de cuál sería el uso para el atributo 'id' así que lo omití de mi violín
• Lo mismo para 'showInput' - no pude entender qué es lo que está tratando de obtener

Answer 2

también se utiliza ca $ tiempo de espera para notificar angular de sus cambios, como

.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 
}; 
});