我已经尝试过在我的应用程序中使用bs3模式的这个片段,它运行正常。 http://jsfiddle.net/alexsuch/RLQhh/
但是,我想将模态代码和其他一些html标记包装到模板中以便重用。
<div ng-controller="MainCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<div ng-include src="'modal.html'"></div>
<script type="text/ng-template" id="modal.html">
<modal title="Login form" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</modal>
</script>
</div>
这是我的jsFiddle http://jsfiddle.net/wangjunji/gL7scbd9/
接下来是问题。切换按钮仅适用于第一次。 我知道ng-include指令会创建一个子范围,使得父范围内的变量无法访问,但我不知道这个棘手的问题。任何人都可以帮忙吗?
感谢。
答案 0 :(得分:1)
我已经改变了你的代码,所以布尔值将驻留在一个对象中,现在你只需要观察它:
控制器更改:
mymodal.controller('MainCtrl', function ($scope) {
$scope.modalObj = { showModal : false };
$scope.toggleModal = function(){
$scope.modalObj.showModal = !$scope.modalObj.showModal;
};
});
指令(主要)改变:
scope.$watch(function () { return scope.modalObj.showModal; }, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
当然,这些行现在将引用scope.modalObj.showModal
而不是使用parent / attr关键字,通常你应该尽量避免这些。