web-dev-qa-db-ja.com

AngularJS-モーダルウィンドウを閉じる

私のインクルードは：

bootstrap.css [ getbootstrap.com/2.3.2 ]
angular/ui-bootstrap-tpls-0.10.0.min.js from: [ angular-ui.github.io/bootstrap ]

AngularJSとTwitter Bootstrapを使用しています。

AngularJSから、次のようにしてモーダルウィンドウを開きます：

var modalInstance = $modal.open({
              templateUrl: 'resources/html/mymodal.html',
              controller: 'mymodalController',
              scope: $scope
            });

私のモーダルテンプレートは：

<div class="modal">
<
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
  </div>
.....
</div>


質問：
閉じる[x]ボタンが機能しない
それをクリックしても、モーダルは消えません。しかし、Escキーを押すと、モーダルが消えます。
したがって... data-dismiss = "modal"は機能していません。何か案は？

angularjstwitter-bootstrapangular-ui-bootstrap
6
Jasper

data-dismiss属性はbootstrap javascriptで使用されます（HTMLソースコードは http://getbootstrap.com/javascript/#modals から取得したようです））

UI Bootstrapは、その属性を探していないため、閉じるボタンにバインドされません。ng-clickを追加して、例のようにモーダルを閉じる必要があります

http://angular-ui.github.io/bootstrap/#/modal

コントローラ内：

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

モーダルテンプレート...

<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
12
JeremyWeir

アンギュラーでは、開いているモーダルウィンドウを閉じるための$modalInstanceのcloseメソッドがあります。

コントローラー：

  $scope.closeMyPopup = function () {
    $modalInstance.close();
  };
3
Rubi saini