从angular度控制器closuresTwitter Bootstrap模态
我有一个模式窗口，我用来向用户展示一个表单。 他们input的信息，然后按下一个button，有一个ng点击。 服务器处理请求并发送回应。 当响应成功时，我想closures控制器的模态窗口。 这怎么能实现？
模态是另一个页面中的一个部分
主页：
<!-- 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 }); } };
在成功和错误function中，从控制器中closures模态的正确方法是什么？
提前致谢，
你有没有看过angular-ui bootstrap ？ 有一个对话框（ui.bootstrap.dialog）指令工作得很好。 您可以在callbackangular度方式（按照示例）中closures对话框：
$scope.close = function(result){ dialog.close(result); };
更新：
该指令自此更名为莫代尔 。
我们可以在不使用angular-ui的情况下达到同样的效果。 这可以使用angular度指令来完成。
首先将该指令添加到模态。
<div class="modal fade" my-modal ....>...</div>
创build一个新的angular度指令：
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(); });
我仍然在angular色js早期。 我知道我们不应该操纵控制器内的DOM。 所以我在指令中有DOM操作。 我不确定这是否同样糟糕。 如果我有更好的select，我会在这里张贴。
重要的是要注意，我们不能简单地在视图中使用ng-hide或ng-show来隐藏或显示模式。 这只是隐藏了模态，而不是模态的背景。 我们必须调用模态（）实例方法来完全删除模态。
你可以这样做：
angular.element('#modal').modal('hide');
这里有一个可重用的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-if作为条件
<div modal-show class="modal fade"> ...bootstrap modal... </div>
用法示例＃2 – 在模态可见属性中使用Angularexpression式
<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)
我迟到了这个问题 – 在这里为另一个问题创build了这个指令。 Bootstrap模态的简单angular度指令
希望这可以帮助。
您可以将data-dismiss =“modal”添加到调用了angularjs函数的button属性中。
如;
<button type="button" class="btn btn-default" data-dismiss="modal">Send Form</button>
我已经通过@isubuz把 这个答案和@UmurKontacı在属性指令中 的答案混合成了一个版本，在这个版本中你的控制器不会调用像“dismiss”这样的类似于DOM的操作，而是尝试使用更多的MVVM风格，设置一个布尔值属性isInEditMode 。 该视图又将这一点信息链接到打开/closures引导模式的属性指令。
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>
**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>
只需设置模式“closuresbutton”ID为我设置btnClose，为closures模态angular度，你必须触发closuresbutton点击事件，因为我做$（'＃btnClose'）。click（）
你可以用一个简单的jQuery代码来做到这一点。
$('#Mymodal').modal('hide');
