9

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

フィドルのリンクはこちら: http://jsfiddle.net/NNDhX/

4

4 に答える 4

16

ディレクティブには独自の分離スコープがあります。したがって、関数「hi」はディレクティブのスコープ内にある必要があります。コントローラーの関数を渡したい場合は、scope: { ..., hi: '&' }and thenのようにバインディングを行う必要があります<you-directive hi='hi' ..>。これに関するドキュメントへのリンクは次のとおりです: Understanding Transclusion and Scopes。

したがって、リンク関数に追加するだけで十分です。

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

これが更新されたフィドルです：http://jsfiddle.net/GwBAh/

于 2013-01-10T11:37:02.387 に答える
1

分離スコープの全体的な考え方は、親<->子スコープ間で物事を「共有」することを回避し、他のディレクティブ/コントローラーによって公開されたり（意図せずに）変更されたりするのを何らかの形で保護することです。

分離スコープを避けて親のスコープを共有したい場合は、これを試してください：

ディレクティブのスコープ定義を削除することから始めます (以下にコメント):

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/

于 2013-01-10T12:11:29.440 に答える
0

ディレクティブ内のコントローラー関数は、transcluded ブロック内で呼び出す必要があります。ディレクティブのテンプレート内でコントローラー メソッドを使用すると、ディレクティブがコントローラーに依存し、その依存関係 (ディレクティブ-外部コントローラー) によって望ましくない設計になります。

サンプル<a>では、​​コードの一部をトランスクルードされたブロックに翻訳します。これにより、ディレクティブがより分離され、問題が解決されました。

 <div class="zippy" zippy-title="Details: {{title}}...">
  {{text}}
  <a ng-click="hi();">hi</a>
</div>
于 2016-03-05T08:44:59.417 に答える