AngularJSのカスタムディレクティブng-show/ng-hide

Question

警告：角の初心者が先行しています。

私はデフォルトで「返信」リンクを表示するカスタムウィジェットを作成しようとしています。クリックすると、非表示にしてテキストエリアが表示されるはずです。ここまでは私がこれまで行ってきたことですが、動作しません::

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

いずれかのガイドラインが理解されます。ありがとう！

Answer 1

マティアスは、ここで働いjsFiddleです：http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

あり、実際に起こって多くのことがあったが、私は最も重要なものは、あなたがスコープを使用する必要があるという事実だったと思う$角度の通知を持って適用されます。スコープは「幻視の世界の外」から変化します。

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

詳細情報ここに：http://docs.angularjs.org/api/ngあなたが適用にそれをラップする必要があるので、デフォルトでは、角度はそれぞれ、すべてのDOMイベントにテンプレートの再評価をトリガしません。 。$のrootScope.Scope

あなたの例では注目に値する他の項目もあります：私はあなたがあなたのディレクティブの属性として「ラベル」を通過し、その後にそれを使用できるようにしたいと思い推測

• は、あなたのテンプレート - もしそうなら、{{label}}式
• 私は 'id'属性のために何が使われるのかよく分からなかったので、私のフィドルから省略しました。
• 'showInput'と同じです - あなたが得ようとしているものが何であるかは分かりません
私は完全な例を求めることができる

Answer 2

あなたはまた、そのような

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