ブートストラップモードを自動的に表示するという簡単な指示がありますか? Bootstrap 3では、彼らはモーダルを自動的に表示する能力を失ったので、ng-ifのショーブロックを使用することはできません。どんな助けも素晴らしいだろう。ブートストラップモードのための単純な角度指令
答えて
は角1.2 &ブートストラップ3.1.1のための更新:http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/
ディレクティブは孤立スコープを持っていないので、私はEnder2050の答えを拡張しました。つまり、モーダルコンテンツにスコープオブジェクトへの参照を含めることができます。また、ディレクティブ属性を再利用して、1つの属性だけが必要となります。
app.directive("modalShow", function ($parse) {
return {
restrict: "A",
link: function (scope, element, attrs) {
//Hide or show the modal
scope.showModal = function (visible, elem) {
if (!elem)
elem = element;
if (visible)
$(elem).modal("show");
else
$(elem).modal("hide");
}
//Watch for changes to the modal-visible attribute
scope.$watch(attrs.modalShow, function (newValue, oldValue) {
scope.showModal(newValue, attrs.$$element);
});
//Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
$(element).bind("hide.bs.modal", function() {
$parse(attrs.modalShow).assign(scope, false);
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
});
}
};
});
使用法:
<div modal-show="showDialog" class="modal fade"> ...bootstrap modal... </div>
ここには、ブートストラップモードを隠して表示するAngularディレクティブがあります。
app.directive("modalShow", function() {
return {
restrict: "A",
scope: {
modalVisible: "="
},
link: function (scope, element, attrs) {
//Hide or show the modal
scope.showModal = function (visible) {
if (visible)
{
element.modal("show");
}
else
{
element.modal("hide");
}
}
//Check to see if the modal-visible attribute exists
if (!attrs.modalVisible)
{
//The attribute isn't defined, show the modal by default
scope.showModal(true);
}
else
{
//Watch for changes to the modal-visible attribute
scope.$watch("modalVisible", function (newValue, oldValue) {
scope.showModal(newValue);
});
//Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
element.bind("hide.bs.modal", function() {
scope.modalVisible = false;
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
});
}
}
};
});
使用例#1 - これはあなたがモーダルを表示したいと仮定し - これはモーダルで角度の式を使用しています - あなたは条件
<div modal-show class="modal fade"> ...bootstrap modal... </div>
使用例#2としてNG-IFを追加することができます-visible属性
<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>
他の例 - コントローラとの対話をデモするために、あなたはあなたのコントローラにこのような何かを追加することができ、それが2秒後にモーダルを表示し、5 secon後にそれを隠しますds。
$scope.showDialog = false;
$timeout(function() { $scope.showDialog = true; }, 2000)
$timeout(function() { $scope.showDialog = false; }, 5000)
私が他の解決方法を思いつくのは心配です。乾杯!
はちょうどこの中に差し込まれ、それは素晴らしい作品。高速応答とBootstrap 4へのリンクをありがとう: – Lereveme
"大きなライブラリーを今は入れたくありません" - jQueryとBootstrapのJavaScriptを含めることにしました... ehhh ... –
これはしかし、それはコントローラのスコープ内でshowDialogを回しませんし、popaloverを閉じた後に再びmodal-visible属性をfalseに戻します。 DOMからのみ消えますが、その変更はモデルに反映されません。 どうすればよいですか? –
- 1. 簡単な角度指令
- 2. 角度指令
- 3. 角度指令
- 4. 角度指令コントローラスコープ
- 5. ドロップダウン指令角度
- 6. 角度指令。 NgTableのデータロード
- 7. ディレクティブアクセスへの角度指令
- 8. 角度指令のデフォルトパラメータ
- 9. 角度指令テンプレートの不明なスコープ
- 10. 範囲確認のための角度指令
- 11. 角度指令コールバック関数
- 12. 角度指令とコンポーネント
- 13. 角度指令とコントローラ
- 14. 角度ui-routerオーバーライド指令
- 15. 角度指令 - 指令追加後のスコープ分割
- 16. FacebookのコメントIon Appの角度指令
- 17. どの角度指令バインドコントローラのサービスデータ
- 18. 角度指令のコードの最適化
- 19. 角度指令テーブルの行の問題
- 20. 角度指令でのルーティングの問題
- 21. ng-repeatに異なる角度指令を含める
- 22. カスタムディレクティブ内の角度UIブートストラップ指令を
- 23. コントローラからの角度指令関数
- 24. 角度指令 - 関数の実行
- 25. 角度指令の動作は
- 26. 角度指令ngRepeat内のトランジション
- 27. 角度2の単純なドロップダウンコンポーネント
- 28. 別の指令内の単純な角度指令 - コントローラの有効範囲にどのように値を渡すか
- 29. 角度の単純なユーティリティ機能のためのサービスを使用する点
- 30. 角度コメント指令 - 目的/テント/ベストプラクティス
これは、(DOMツリーのモーダルの場所のために)ブートストラップのNavbarの後ろにモーダルが消えてしまうことを除いて、魅力的に機能します。 $(elem).modal( "show")を$(elem).appendTo( 'body')。modal( "show")に変更して解決しました。 –