twitter-bootstrap - AngularControllerからTwitterBootstrapModalを閉じる

Question

ユーザーにフォームを表示するために使用するモーダルウィンドウがあります。情報を入力し、ボタンを押してクリックします。サーバーは要求を処理し、応答を送り返します。応答が成功したら、コントローラーからモーダルウィンドウを閉じます。これはどのように達成できますか？

モーダルは別のページに部分的に含まれています

メインページ：

<!-- main content -->
<p>Foo</p>
<!-- angular directive -->
<foo-directive></foo-directive>

その指令の内容：

<div ng-controller="FooCtrl">
    <ul class="thumbnails">
        <li class="span3 tile tile-white" ng-repeat="foo in model.foo">
            <div>
                {{foo.bar}}
            </div>
            <div>
                ({{foo.bam}})
            </div>
            <div>
                <a data-toggle="modal" href="#myModal"><img src="{{foo.imgPath}}"></a>
            </div>
        </li>
    </ul>
    <!-- foo modal partial included by ejs -->
    <% include foo_modal.ejs %>
</div>

モーダルマークアップ：

<div id="fooModal" class="modal hide fade in" style="display: none; ">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>New Device</h3>
    </div>
    <div class="modal-body">
        <h4>Foo Modal</h4>
        <div ng-controller="FooCtrl">
            <form name="fooFrm">
                <input id="email" type="email" class="input-medium" ng-model="fooEmail"
                       placeholder="Email">
                <button class="btn btn-primary btn-small"
                        ng-click="doFoo({email:fooEmail})">Email Link</button>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
</div>

コントローラーコード：

functionFooCtrl($scope, FooService) {


    $scope.doFoo= function (email) {
       FooService.save({email:email.fooEmail}) {
            alert('Request successful');
            //TODO close Twitter bootstrap modal named fooModal here
        },
            function (err) {
                alert('Your request bonked, sorry');
                //TODO close twitter bootstrap modal named fooModal here
            });
        }
    };

成功関数とエラー関数でコントローラーからモーダルを閉じる正しい方法は何ですか？

前もって感謝します、

score 53 · Accepted Answer

angle-uiを使用せずに同じことを実現できます。これは、角度ディレクティブを使用して実行できます。

まず、ディレクティブをモーダルに追加します。

<div class="modal fade" my-modal ....>...</div>

新しい角度ディレクティブを作成します。

app.directive('myModal', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attr) {
       scope.dismiss = function() {
           element.modal('hide');
       };
     }
   } 
});

次に、コントローラーからdismiss（）メソッドを呼び出します。

app.controller('MyCtrl', function($scope, $http) {
    // You can call dismiss() here
    $scope.dismiss();
});

私はまだAngularjsを使っている初期の頃です。コントローラー内でDOMを操作するべきではないことを私は知っています。したがって、ディレクティブにDOM操作があります。これが同じように悪いかどうかはわかりません。より良い代替案があれば、ここに投稿します。

注意すべき重要なことは、モーダルを非表示または表示するために、ビューでng-hideまたはng-showを単純に使用することはできないということです。これは、モーダルの背景ではなく、単にモーダルを非表示にします。モーダルを完全に削除するには、modal（）インスタンスメソッドを呼び出す必要があります。

score 35 · Accepted Answer

あなたはこのようにそれを行うことができます：

angular.element('#modal').modal('hide');

score 22 · Accepted Answer

angle-uiブートストラップを見たことがありますか？非常にうまく機能するDialog（ui.bootstrap.dialog）ディレクティブがあります。角度のある方法でコールバックしている間、ダイアログを閉じることができます（例による）：

$scope.close = function(result){
  dialog.close(result);
};

アップデート：

その後、ディレクティブの名前はModalに変更されました。

score 5 · Accepted Answer

これは、ブートストラップモーダルを非表示および表示する再利用可能な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-これは、モーダルを表示することを前提としています-条件としてng-ifを追加できます

<div modal-show class="modal fade"> ...bootstrap modal... </div>

使用例＃2-これは、modal-visible属性でAngular式を使用します

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>

別の例-コントローラーの相互作用をデモするには、このようなものをコントローラーに追加すると、2秒後にモーダルが表示され、5秒後に非表示になります。

$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)

私はこの質問に貢献するのに遅れています-ここで別の質問のためにこのディレクティブを作成しました。ブートストラップモーダル用のシンプルな角度ディレクティブ

お役に立てれば。

score 1 · Accepted Answer

anglejs関数を呼び出すボタン属性にdata-dismiss="modal"を追加できます。

そのような;

<button type="button" class="btn btn-default" data-dismiss="modal">Send Form</button>

score 0 · Accepted Answer

属性ディレクティブに関する@isubuzによる回答と@UmurKontacıによるこの回答を、コントローラーが「dismiss」のようなDOMのような操作を呼び出さないバージョンにリミックスしましたが、代わりに、ブール値を設定して、よりMVVMスタイルにしようとしますプロパティ。次に、ビューはこの情報を、ブートストラップモーダルを開閉する属性ディレクティブにリンクします。isInEditMode

var app = angular.module('myApp', []);

app.directive('myModal', function() {
   return {
     restrict: 'A',
     scope: { myModalIsOpen: '=' },
     link: function(scope, element, attr) {
       scope.$watch(
         function() { return scope.myModalIsOpen; },
         function() { element.modal(scope.myModalIsOpen ? 'show' : 'hide'); }
       );
     }
   } 
});

app.controller('MyCtrl', function($scope) {
  $scope.isInEditMode = false;
  $scope.toggleEditMode = function() { 
    $scope.isInEditMode = !$scope.isInEditMode;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="myApp" ng-controller="MyCtrl as vm">

<div class="modal fade" my-modal my-modal-is-open="isInEditMode">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        Modal body! IsInEditMode == {{isInEditMode}}
      </div>
      <div class="modal-footer">
        <button class="btn" ng-click="toggleEditMode()">Close</button>
      </div>
    </div>
  </div>
</div>

<p><button class="btn" ng-click="toggleEditMode()">Toggle Edit Mode</button></p> 
<pre>isInEditMode == {{isInEditMode}}</pre>
  
</div>

score -1 · Accepted Answer

**just fire bootstrap modal close button click event**
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope,$http){
  $('#btnClose').click();// this is bootstrap modal close button id that fire click event
})

--------------------------------------------------------------------------------

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

btnCloseを設定したときにモーダル'閉じるボタン'idを設定するだけです。角度でモーダルを閉じるには、$（'＃btnClose'）。click（）と同じように閉じるボタンクリックイベントを発生させる必要があります。

score -2 · Accepted Answer

-2

簡単なjqueryコードでそれを行うことができます。

$('#Mymodal').modal('hide');

于 2015-06-05T15:33:34.543 に答える

twitter-bootstrap - AngularControllerからTwitterBootstrapModalを閉じる

8 に答える 8

Related

Reference