ディレクティブの内部テンプレートのng-clickは機能を提供していません

Question

ng-clickはアラートを提供していません。ディレクティブの内部テンプレートをクリックすると警告ボックスは表示されません。

フィドルリンクはここにある：http://jsfiddle.net/NNDhX/

Answer 1

あなたのディレクティブは、独自の孤立範囲を持っています。だから、関数 'hi'は指示のスコープの中にあるべきです。あなたのコントローラの機能を渡したい場合は、scope: { ..., hi: '&' }のようにバインドし、次に<you-directive hi='hi' ..>のようにバインドする必要があります。ここには、これに関する文書へのリンクがあります：Understanding Transclusion and Scopes。

はそうちょうど機能をリンクでそれを追加することは十分にある。ここでは

link: function(scope, element, attrs) { 
    scope.hi = function() { alert("hi"); } 

はフィドル更新されます http://jsfiddle.net/GwBAh/

Answer 2

分離株のスコープの全体的なアイデアは、親<間の事を「共有」を避けるために、正確です - >何らかの形でそれらが公開されるのを防ぎ、（意図せず）他の指令/コントローラによって変更されてしまいます。

あなたが本当に分離株範囲を避け、親のスコープを共有し、この試してみたい場合：（以下コメント）ディレクティブのスコープ定義を除去することにより、

スタート：

transclude: true, 
/*scope: { title:'@zippyTitle' },*/ 

次に置きますディレクティブのスコープのディレクティブ要素からの属性（attrs）：

scope.attrs = attrs; 

注意：これを行うことで、attrsプロパティも親（Ctrl3）スコープで利用可能になります。

そして最後にscope.attrs

template: '<div>' + 
       '<div class="title">{{attrs.zippyTitle}}</div>' + 
       '<div class="body" ng-transclude></div>' + 
         '<a ng-click="hi();">hi</a>' + 
      '</div>', 

jsFiddleに基づいてタイトルを定義します。http://jsfiddle.net/NNDhX/1/

Answer 3

これが最善の方法である場合、私は知りませんが、あなたがアクセスするディレクティブで$親を使用することができます親スコープ。ここで

<a ng-click="$parent.hi();">parent</a> 

は完全なバイオリンの例へのリンクです：ディレクティブ内部http://jsfiddle.net/EKDse/

Answer 4

コントローラの機能は、トランスクルードブロック内で呼び出さなければなりません。ディレクティブのテンプレート内でコントローラメソッドを使用すると、ディレクティブはコントローラに依存します。ディペンド（depedencies）（ディレクティブ - アウターコントローラ）によって望ましくないデザインになります。

サンプルトランケートでは、<a>のコードを継ぎ足したブロックに貼り付けます。あなたの指示をより孤立させ、問題を解決しました：