[解決済み] AngularJSで分離されたスコープを持たないディレクティブからコントローラ関数を呼び出す
質問
ディレクティブの中から、孤立したスコープを使わずに親スコープ上の関数を呼び出す方法が見つかりません。孤立したスコープを使用する場合、孤立した中で "&" を使用して親スコープ上の関数にアクセスできることは知っていますが、必要でないときに孤立したスコープを使用すると、結果が出ます。次のような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);
関連
-
[解決済み] createspyとcreatespyobjの違いは何ですか?
-
[解決済み] AngularJS 。scope.apply()呼び出し時の$digest already in progressエラーを防ぐ。
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJSでディレクティブを書くとき、新しいスコープ、新しい子スコープ、または新しい分離されたスコープが必要であるかどうかは、どのように決定するのですか?
-
[解決済み] AngularJSのng-repeatスコープを使ったディレクティブアイソレートスコープ
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] AngularJSのディープリンクとは何ですか?
-
[解決済み] Angular ng-repeatの条件付きラップアイテム(ng-repeatのグループアイテム)。
-
[解決済み] AngularJSでkeypressイベントを使用するには?
-
[解決済み] Angularのui-routerでデフォルトの状態を設定する方法
-
[解決済み] md-selectでデフォルト値を設定する方法
-
[解決済み] 新しい/分離されたスコープを求める複数のディレクティブ [ngController, ...] がある。
-
処理されない例外が発生しました。Angular 実行中のプロジェクトで NGCC に失敗しました。
-
角型グローバル確認ボックス
-
[解決済み] ng-modelとng-bindの違いは何ですか?