从角度控制器关闭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（）