從角度控制器關閉Twitter Bootstrap模態

Question

我有一個模式窗口，我用它向用戶呈現窗體。他們輸入信息，然後按下一個按鈕，即可獲得ng-click。服務器處理請求併發送回應。當響應成功時，我想關閉控制器的模態窗口。這怎麼能實現？

模態是包括在另一頁的局部

主頁：

<!-- 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 
      }); 
     } 
    }; 

什麼是在成功和錯誤功能關閉控制器模式的正確方法？

由於提前，

Answer 1

你有沒有看angular-ui bootstrap？有一個Dialog（ui.bootstrap.dialog）指令工作得很好。你可以再打角的方式（每例子）期間關閉對話框：

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

更新：

該指令已被更名爲Modal。

Answer 2

我們可以在不使用angular-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'); 
     }; 
    } 
    } 
}); 

現在從您的控制器調用解僱（）方法。

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

我仍然在角質js的早期。我知道我們不應該在控制器內操縱DOM。所以我在指令中有DOM操作。我不確定這是否同樣糟糕。如果我有更好的選擇，我會在這裏發佈。

重要的是要注意的是，我們不能簡單地在視圖中使用ng-hide或ng-show來隱藏或顯示模態。這只是隱藏了模態而不是模態背景。我們必須調用模態（）實例方法來完全刪除模態。

Answer 3

這是一個可重用的Angular指令，它將隱藏並顯示Bootstrap模式。

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-如果作爲條件

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

使用例＃2 - 這使用在模態的角度表達 - 可見光屬性

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

另一個例子 - 演示控制器互動，您可以添加這樣的事情到控制器，它會顯示2秒後的模式，然後5塞康後隱藏DS。

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

我遲到了對這個問題的貢獻 - 在這裏爲另一個問題創建了這個指令。 Simple Angular Directive for Bootstrap Modal

希望這會有所幫助。

Answer 4

您可以將data-dismiss =「modal」添加到調用了angularjs功能的按鈕屬性中。

如;

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

Answer 5

你可以用一個簡單的jQuery代碼來做到這一點。

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

Answer 6

你可以這樣說：

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

Answer 7

我已經混音the answer by @isubuz和this answer by @Umur Kontacı on attribute directives成的版本，其中控制器並不要求像「解聘」一類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>

Answer 8

**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> 

只設置模式「關閉按鈕」 ID爲我設置btnClose，對角關閉模式，你必須只大火，關閉按鈕點擊事件，像我一樣$（」 #btnClose'）。click（）