Directiva personalizada de AngularJS ng-show/ng-hide

Advertencia: novato angular por delante.

Estoy tratando de crear un widget personalizado que mostrará de forma predeterminada un enlace "Responder", y cuando se hace clic, 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 pauta será apreciada. ¡Gracias!

preguntado el 31 de julio de 12 a las 14:07

2 Respuestas

Matias, aquí hay un jsFiddle que funciona: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

Realmente sucedieron varias cosas, pero creo que la más importante fue el hecho de que necesita usar Scope.$apply para tener cambios de alcance de aviso angular desde 'fuera del mundo de anular'. De forma predeterminada, angular no activa la reevaluación de plantillas en todos y cada uno de los eventos DOM, por lo que debe ajustarlo para que se aplique:

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 poder pasar 'etiqueta' como un atributo a su directiva y luego usarlo en su plantilla; si es así, necesita usar la expresión {{label}}
  • No estaba muy seguro de cuál sería el uso del 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

Respondido 31 Jul 12, 18:07

¿Puedo pedir un ejemplo completo? - honzajde

@ user271996 Hay un jsFiddle con un ejemplo completo adjunto a la respuesta. ¿Todavía echas de menos algo? - pkozlowski.código abierto

Probablemente pueda vincular la función de clic de etiqueta a través de ng-click en la plantilla en lugar de adjuntarla manualmente en la función de enlace. - Daniel Lo Negro

también puede usar $ tiempo de espera para notificar a 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
 };
});

Respondido el 11 de enero de 15 a las 00:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.