angular.js：オリジナルのdomからディレクティブのdomにngclickを渡す方法は？

Question

こんにちはそこに私が働いている、この「確認できる」ボタンディレクティブ、「確認できる」ディレクティブをトリガーする

HTMLコードを持って

 <span confirmable ng-click='users.splice($index,1)'></span> 

ディレクティブ：（CoffeeScriptの）

angular.module('buttons',[]) 

    .directive 'confirmable',() -> 
    template: """ 
     <button class='btn btn-mini btn-danger'> 
     Destroy 
     </button> 
    """ 
    replace: yes 

だから私はこのディレクティブで生成された見てみたいと思います最終結果は

 <button class='btn btn-mini btn-danger' ng-click='users.splice($index,1)'> 
     Destroy 
     </button> 

です3210

は、これまでのところ私はディレクティブ

angular.module('buttons',[]) 

    .directive 'confirmable',() -> 
    template: """ 
     <button class='btn btn-mini btn-danger'> 
     Destroy 
     </button> 
    """ 
    replace: yes 
    link: (scope, el, attrs) ->    <---------- linking function 
     $(el).attr 'ng-click', attrs.ngClick 

内のリンク機能で動作するようにそれを得た。しかし、私は再びディレクティブのドキュメントを通じて行ってきた、と=、@、&事業者が、私とスコープのプロパティを見つけましたもし私が必要なものであるかどうかは本当に分かりません。それから私はまだ理解する必要があるこの転写プロパティがありますが、現時点では役に立たないようです。だから私のリンク機能は今のところトリックですが、角度がより洗練された解決策を提供するかどうかを尋ねるべきだと思っていました。

ありがとうございます！あなたのディレクティブ内から親スコープからメソッドを呼びたいようですが、私に聞こえる

Answer 1

...

私はPlunk here

（申し訳ありませんが、私はJavaScriptを好き一緒に入れています...ここに行く）

あなたは親のコントローラです。

app.controller('ParentCtrl', function($scope) { 
    $scope.fooCalled = 0; 
    $scope.foo = function() { 
     $scope.fooCalled++; 
    }; 
}); 

その後

<div ng-controller="ParentCtrl"> 
    Foo Called: {{fooCalled}}<br/> 
    <button ng-click="foo()">Call From Parent</button><br/> 
    <custom-control custom-click="foo()"></custom-control> 
</div> 

そして、あなたのディレクティブ宣言アップあなたのマーク：あなたのディレクティブの定義におけるscope宣言で

app.directive('customControl', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     innerFoo: '&customClick' 
    }, 
    template: '<button ng-click="innerFoo()">Call From Control</button>' 
    }; 
}); 

ビットがあなたの親スコープ機能のリファレンスを結びつけるものですディレクティブのスコープで、クリック時に呼び出すことができます。それは&のためです。

Answer 2

あなたは正しいことをしています。コントローラは、ディレクティブ間で共通の機能を共有するためのものです。あなたはここでは必要ありません。また、この場合には、あなたもリンク機能を必要としないので、簡単です：ディレクティブをコピー

http://jsfiddle.net/V7Kpb/12/

がリンク段階でオーバー属性限り角度が懸念していると何もしません。 ng-clickという属性のボタンがありますが、AngularがDOMを処理した後に追加されました。

また、リンク関数の2番目のパラメータとしてelementがすでにjQLiteです（おそらくそれもリンクされている場合は完全なjQueryです）。jQuerifyする必要はありません。

また、隔離スコープ（=、@および&が挙げられます）についても同様です。素敵なエレガントな構文ですが、大きな欠点は同じ要素の他のディレクティブがスコープからも分離されることです。ですから、あなたがすることが一般的なngModelを使いたい場合、分離スコープを使うことはできません。実際には、この場合でも、隔離スコープを使用する場合は、ng-click stop workingを使用します。 scope {}プロパティで明示的に宣言されていないものを含む式を評価しようとするためです。

Answer 3

リンクステージでDOMを操作し、その要素に角度ロジックを追加する場合は、影響を受ける要素をコンパイルする必要があります。 DOMを処理してng-*ディレクティブを追加した後、角度注入$compileを呼び出して起動します。

function MyDirective($compile) 
 
{ 
 
    return { 
 
     
 
     restrict: "AE", 
 
     templateUrl: "/path", 
 
     link: (scope, element, attributes) => 
 
     { 
 
      // Add your directives 
 

 
      $compile(element.contents())(scope); 
 
     } 
 
    }; 
 
}