スコープ内のAngularディレクティブ関数にイベントを送信します

ヴァンダーヴァルス

ajax呼び出しでオプションをテンプレートにロードする複数選択を表示するためのangularを使用したディレクティブを作成しようとしています。今のところ私の指示は次のとおりです。

function AngularMultiselect () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'temp.html',
        scope: {
            tipo: "@"
        },
        link: function(scope, element, attrs){
            scope.open_tab = function(){
                element.addClass('open');
                $(document).on("click",function(){ //beign called at the same time
                    console.log("document clicked");
                });
            };
            console.log('multiselect being called');

        }
    }
}

HTML:

<filtro tipo="client"></filtro>

テンプレート内:

<button type="button"
        class="multiselect btn"
        ng-click="open_tab()">

私が抱えている問題は、タブが同時に開閉することです。イベントを使用してイベントの伝播を停止しますが、送信できません...試しましたopen_tab($event)が、$eventが含まれています'client'何か案は?

ここでそれが機能しているのを見ることができます:http//codepen.io/vandervals/pen/VeZrdV

ピエールゲイバレット

この問題を回避するには、ドキュメントクリックハンドラの添付を延期するだけです。

の代わりに :

scope.open_tab = function(){
                element.addClass('open');
                $(document).on("click",function(){ //beign called at the same time
                    console.log("document clicked");
                });
            };

ただやる:

scope.open_tab = function(){
  element.addClass('open');
  $timeout(function() {
    $(document).on("click",function(){ //no longer beign called at the same time
      console.log("document clicked");
    });
  }, 1, false);
};

最初のクリックイベントを回避して2番目のハンドラーをトリガーするには

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

非ディレクティブコントローラ関数内の属性値にアクセスします

分類Dev

ディレクティブテンプレート内の外部コントローラ関数にアクセスします

分類Dev

ディレクティブテンプレート内の$ scope変数にアクセスし、コントローラー$ scope.variableを更新します

分類Dev

Angularディレクティブ:既存のテンプレート要素にコンパイル時にng-classディレクティブを追加します

分類Dev

コントローラーから角度ディレクティブに関数を送信します

分類Dev

スコープ関数をクローン(およびコンパイル済み)angularディレクティブに渡します

分類Dev

ディレクティブでは、関数の引数をhtmlテンプレートに渡します

分類Dev

子ディレクティブで親ディレクティブのコントローラースコープ変数にアクセスします

分類Dev

ディレクティブのリンク関数のイベントでスコープ変数を変更する

分類Dev

イベントなしで親スコープでディレクティブ関数にアクセスできるようにする

分類Dev

複数のテンプレートをHTMLとしてディレクティブに挿入し、ディレクティブスコープにコンパイルします

分類Dev

リンク関数内からAngularディレクティブのスコープを調べるにはどうすればよいですか?

分類Dev

リンカ関数のスコープはangularjsディレクティブで何を表しますか

分類Dev

Angularディレクティブの分離されたスコープ内で関数を定義する

分類Dev

要素の .html() 内のコントローラー関数に引数を渡す角度ディレクティブ

分類Dev

関数とスコープ変数をオブジェクトのディレクティブに渡す

分類Dev

分離スコープを使用する場合、ディレクティブからコントローラーの関数を呼び出しますか?

分類Dev

フォーム送信イベントをカスタムディレクティブの親にどのように伝播しますか?

分類Dev

Angular JS:スコープを持つディレクティブのコントローラーがすでにある場合、ディレクティブのリンク関数の必要性は何ですか?

分類Dev

DOMイベントをAngularディレクティブに追加します

分類Dev

ディレクティブのスコープ外で定義されたディレクティブのリンク関数にファクトリを挿入します

分類Dev

ディレクティブのコントローラーがなくても、変数をvmとしてディレクティブスコープにバインドしますか?

分類Dev

各独立したディレクティブ内のスコープは、そのディレクティブ内で分離され、プライベートになっていますか?

分類Dev

同じディレクティブのリンク関数内でディレクティブコントローラーの関数を使用する

分類Dev

$ emitを使用してディレクティブからコントローラーにイベントを送信します

分類Dev

anglejs-テンプレート内のディレクティブ要素をコピーします

分類Dev

Angular-コントローラー関数呼び出しのスコープ変数の更新がディレクティブhtmlに反映されない

分類Dev

ディレクティブリンク関数のスコープの関数にアクセスする

分類Dev

Angular1.3:再帰ディレクティブテンプレート内のアクセスコントローラー関数?

Related 関連記事

  1. 1

    非ディレクティブコントローラ関数内の属性値にアクセスします

  2. 2

    ディレクティブテンプレート内の外部コントローラ関数にアクセスします

  3. 3

    ディレクティブテンプレート内の$ scope変数にアクセスし、コントローラー$ scope.variableを更新します

  4. 4

    Angularディレクティブ:既存のテンプレート要素にコンパイル時にng-classディレクティブを追加します

  5. 5

    コントローラーから角度ディレクティブに関数を送信します

  6. 6

    スコープ関数をクローン(およびコンパイル済み)angularディレクティブに渡します

  7. 7

    ディレクティブでは、関数の引数をhtmlテンプレートに渡します

  8. 8

    子ディレクティブで親ディレクティブのコントローラースコープ変数にアクセスします

  9. 9

    ディレクティブのリンク関数のイベントでスコープ変数を変更する

  10. 10

    イベントなしで親スコープでディレクティブ関数にアクセスできるようにする

  11. 11

    複数のテンプレートをHTMLとしてディレクティブに挿入し、ディレクティブスコープにコンパイルします

  12. 12

    リンク関数内からAngularディレクティブのスコープを調べるにはどうすればよいですか?

  13. 13

    リンカ関数のスコープはangularjsディレクティブで何を表しますか

  14. 14

    Angularディレクティブの分離されたスコープ内で関数を定義する

  15. 15

    要素の .html() 内のコントローラー関数に引数を渡す角度ディレクティブ

  16. 16

    関数とスコープ変数をオブジェクトのディレクティブに渡す

  17. 17

    分離スコープを使用する場合、ディレクティブからコントローラーの関数を呼び出しますか?

  18. 18

    フォーム送信イベントをカスタムディレクティブの親にどのように伝播しますか?

  19. 19

    Angular JS:スコープを持つディレクティブのコントローラーがすでにある場合、ディレクティブのリンク関数の必要性は何ですか?

  20. 20

    DOMイベントをAngularディレクティブに追加します

  21. 21

    ディレクティブのスコープ外で定義されたディレクティブのリンク関数にファクトリを挿入します

  22. 22

    ディレクティブのコントローラーがなくても、変数をvmとしてディレクティブスコープにバインドしますか?

  23. 23

    各独立したディレクティブ内のスコープは、そのディレクティブ内で分離され、プライベートになっていますか?

  24. 24

    同じディレクティブのリンク関数内でディレクティブコントローラーの関数を使用する

  25. 25

    $ emitを使用してディレクティブからコントローラーにイベントを送信します

  26. 26

    anglejs-テンプレート内のディレクティブ要素をコピーします

  27. 27

    Angular-コントローラー関数呼び出しのスコープ変数の更新がディレクティブhtmlに反映されない

  28. 28

    ディレクティブリンク関数のスコープの関数にアクセスする

  29. 29

    Angular1.3:再帰ディレクティブテンプレート内のアクセスコントローラー関数?

ホットタグ

アーカイブ