kwr*_*wrl 8 user-interface modal-dialog twitter-bootstrap angularjs
我有一个模态的奇怪问题.它应该是一个绝对正常的模式,我可以打开和关闭很多次,但我可以打开一个,也只是关闭一次!http://plnkr.co/ksTy0HdifAJDhDf4jcNr
我的index.html文件看起来像这样:
<body ng-controller="MainCtrl">
<div ng-include src="'widget.html'" ng-controller="WidgetCtrl"></div>
<!-- other widgets and content -->
</body>
正如您所看到的,我已将我的应用程序分配到不同的部分(称为小部件),我在我的索引html文件中包含了每个ng-include.每个小部件都有自己的控制器.
该widget.html看起来是这样的:
<div modal="theModal">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
<!-- more modals and other stuff -->
<button ng-click="OpenModal()">open modal</button>
现在是widget控件(它是主控制器的子控制器)
app.controller('WidgetCtrl', function ($scope) {
$scope.OpenModal = function() { $scope.theModal = true; }
$scope.CloseModal = function() { $scope.theModal = false;}
});
用于打开和关闭模态的所有内容都是子控制器(WidgetCtrl)的一部分,因此不应与父控制器中的任何内容冲突.
$scope.theModal在开头undefined,所以模态没有显示.点击按钮$scope.theModal定义并设置为true; 这是由Angular UI触发的,并显示了模态.单击确定,现在存在$scope.theModal设置为false,模态消失.一切都很完美但是......它不再起作用了!
您只需要包含close="CloseModal()"在窗口小部件的第一个div中
<div modal="theModal" close="CloseModal()">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
这是一个工作的plunker
| 归档时间： |
|
| 查看次数： |
6319 次 |
| 最近记录： |