1. ホーム
  2. angularjs

[解決済み] AngularJSで分離されたスコープを持たないディレクティブからコントローラ関数を呼び出す

2023-02-16 01:39:27

質問

ディレクティブの中から、孤立したスコープを使わずに親スコープ上の関数を呼び出す方法が見つかりません。孤立したスコープを使用する場合、孤立した中で "&" を使用して親スコープ上の関数にアクセスできることは知っていますが、必要でないときに孤立したスコープを使用すると、結果が出ます。次のようなHTMLを考えてみましょう。

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

この単純な例では、JavaScriptの確認ダイアログを表示し、確認ダイアログで"OK"をクリックした場合のみdoIt()を呼び出したいと考えています。これは孤立したスコープを使用した簡単なものです。ディレクティブはこのようになります。

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

しかし問題は、分離されたスコープを使っているので、上の例のng-hideはもはや親スコープに対して実行されないということです。 に対してではなく、孤立したスコープで実行されることです (孤立したスコープをディレクティブに使用すると、その要素上のすべてのディレクティブが孤立したスコープを使用することになるからです)。 jsFiddleはこちらです。 で、ng-hideが動作していません。(このフィドルでは、入力ボックスに "yes" と入力するとボタンが隠れるようになっていることに注意してください。)

代替案としては 分離されたスコープを使用しない であり、このディレクティブのスコープを分離する必要がないので、実際に私がここで望んでいるものです。私が持っている唯一の問題は 孤立したスコープでメソッドを渡さない場合、どのように親スコープでメソッドを呼び出すかです。 ?

jsfiddleはこちらです。 で、私は孤立したスコープを使用しておらず、ng-hideはうまく動作していますが、もちろん、confirmAction()への呼び出しは動作しません。

私が本当に探している答えは、孤立したスコープを使用せずに外部スコープで関数を呼び出す方法であることに注意してください。 そして、私はこの確認ダイアログを別の方法で動作させることに興味がありません。なぜなら、この質問のポイントは、外部スコープへの呼び出しを行う方法を見つけ出すことであり、まだ他のディレクティブが親スコープに対して動作できるようにすることだからです。

あるいは、他のディレクティブがまだ親スコープに対して動作する場合、分離したスコープを使用する解決策を聞いてみたいのですが。 というのもありますが、これは無理でしょう。

どのように解決するのですか?

ディレクティブは関数を呼び出しているだけなので (プロパティに値を設定しようとしているわけではありません) $eval の代わりに $parse を使うことができます (分離されていないスコープで)。

scope.$apply(function() {
    scope.$eval(attrs.confirmAction);
});

あるいは、より良い方法は、単に を適用します。 を使えば、スコープに対する引数を $eval()uate してくれます。

scope.$apply(attrs.confirmAction);

フィドル