我在Angularjs中遇到弹出模式的问题。我有一个按钮,点击后我需要显示一个模态。这是我的代码。当我第一次单击“详细信息”按钮时,会出现模式弹出窗口,但是当我再次单击时,app.directive不会被调用。非常感谢帮助。感谢。
JS:
<td>
<button ng-click="toggleModal()">Details</button>
<modal visible="showModal">
<label>Room Details</label>
</modal>
</td>
HTML:
--ignore-ssl-errors=true
答案 0 :(得分:0)
我想问题是隔离范围,你在这里指令scope:true
。使用它,指令内的范围与外部范围分开。为了确认这一点,我使用和不使用scope: true
检查了范围变量。请注意$$watchers
此处:
没有scope: true
使用scope: true
隔离范围有$$watchers == null
。因此,范围变量showDialog
中的任何更改都不会触发监视事件。所以你可能想在这里使用父范围,即控制器的范围。
事件触发一次,因为第一次编译指令时它只将$watchers
附加到元素一次,对于后续调用,外部范围与指令内部范围之间没有关系
有了这个改变,很少有人,我有一个工作plunk。
控制器:
myApp.controller('myCtrl', function($scope) {
$scope.showDialog = false;
$scope.toggleModal = function() {
$scope.showDialog = !$scope.showDialog;
};
});
每当用户关闭模式时,将showDialog
设置为false
为@Mistalis建议。
$(element).bind('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
scope.showDialog = false;
});
});
指令:的
myApp.directive('modal', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
templateUrl: 'modal-partial.html',
//scope: true,
link: function postLink(scope, element, attrs) {
scope.showModal = function(visible, elem) {
if (!elem)
elem = element;
if (visible)
$(elem).modal("show");
else
$(elem).modal("hide");
}
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
if (value === true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).bind('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
});
});
$(element).bind('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
scope.showDialog = false;
});
});
}
};
});