模态不正常

时间:2016-11-21 15:27:49

标签: angularjs bootstrap-modal

我在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

1 个答案:

答案 0 :(得分:0)

我想问题是隔离范围,你在这里指令scope:true。使用它,指令内的范围与外部范围分开。为了确认这一点,我使用和不使用scope: true检查了范围变量。请注意$$watchers此处:

没有scope: true

$$watchers

使用scope: true

$$watchers1

隔离范围有$$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;
                });
            });
        }
    };
});