Indywidualna dyrektywa AngularJS ng-show/ng-hide

Question

Ostrzeżenie: Przednie nowe kątowe.

Próbuję utworzyć niestandardowy widget, który będzie domyślnie wyświetlał link "Odpowiedz", a po kliknięciu powinien być ukryty, a tekst powinien być wyświetlany. Oto, co mam do tej pory, ale to nie działa:

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

Wszelkie wytyczne zostaną docenione. Dzięki!

Answer 1

Matias, tutaj jest jsFiddle pracy: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

Było wiele rzeczy dzieje się naprawdę, ale myślę, że najważniejszym z nich był fakt, że trzeba użyć Zakres $ zastosowanie mają kątową wypowiedzenia. zmiany zakresu ze świata "poza światem zewnętrznym". Domyślnie kątowa nie wyzwala szablony Ponowna ocena na każdym razie DOM więc trzeba owinąć go do zastosowania:

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

Więcej informacji tutaj: http://docs.angularjs.org/api/ng . $ rootScope.Scope

Istnieją również inne elementy warto zwrócić uwagę w swoim przykładzie:

• Chyba chciałbyś być w stanie przejść „etykietę” jako atrybut do swojej dyrektywy, a następnie używać go w Twój szablon - jeśli tak, musisz użyć wyrażenia {{label}}
• Nie byłem całkiem pewien, jaki byłby pożytek z atrybutu "id", więc pominąłem go z mojego skrzypca.
• To samo dla "showInput" - nie mogłem dokładnie określić, co jest tym, co próbujesz uzyskać

Answer 2

ca również użyć $ timeout zawiadomić kątowe swoich zmian, takich jak

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