Direttiva personalizzata AngularJS ng-show/ng-hide

Question

Avviso: newbie angolare avanti.

Sto provando a creare un widget personalizzato che mostrerà per impostazione predefinita un collegamento "Rispondi" e, quando si fa clic, dovrebbe essere nascosto e una textarea dovrebbe essere mostrata. Ecco cosa ho finora, ma non funziona:

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

Qualsiasi linea guida sarà apprezzata. Grazie!

Answer 1

Matias, ecco una jsFiddle di lavoro: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

C'erano certo numero di cose in corso in realtà, ma penso che il più importante è stato il fatto che è necessario utilizzare Ambito $ applicare ad avere preavviso angolare. i cambiamenti di scopo da "fuori dal mondo anulare". Per impostazione predefinita angolare non fa scattare i modelli rivalutazione su ogni evento DOM quindi è necessario avvolgerlo in applica:

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

Maggiori informazioni qui: http://docs.angularjs.org/api/ng . $ rootScope.Scope

ci sono anche altri elementi degni di nota nel tuo esempio:

• Credo che si vorrebbe essere in grado di passare 'label' come un attributo alla direttiva e quindi utilizzarlo in il tuo modello - se è così è necessario utilizzare l'espressione {{label}}
• Non ero sicuro di quale sarebbe stato l'uso per l'attributo 'id' così l'ho omesso dal mio violino
• Lo stesso per "showInput" - non riuscivo a capire quale sia la cosa che stai cercando di ottenere

Answer 2

si ca anche usare $ timeout per notificare angolare delle modifiche come ad esempio

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