0

我正在使用 AngularJS 和 twitter 引导程序。

我有一张桌子，这张桌子属于父控制器。
我有一个弹出窗口，它属于子控制器。

当用户单击表中的一行时，将显示弹出窗口，其中包含有关所选行的更多信息。

这就是我当前的代码的样子：

function ParentCtrl($scope) {
    //called when a row is clicked
    $scope.showMoreInfo = function() {
        $scope.showModal = true;
    }
}

function ChildCtrl($scope) {
    $scope.$watch('showModal', function() {
        if($scope.$parent.showModal !== true) {
            return;
        }

        //Show the popup - #myModal is the ID of the popup div 
        jQuery("#myModal").modal("show");
    });

    //When the popup is closed, change the value
    jQuery("#myModal).on("hide", function() {
        $scope.$parent.showModal = false;
    });
}

现在，此机制完美运行 - 当用户单击该行时，将显示包含该行详细信息的弹出窗口（我使用此处未包含的服务将详细信息从 ParentCtrl 传输到 ChildCtrl 以关注问题手）。
当用户单击弹出窗口中的“X”或关闭按钮时，模式会按预期关闭。进一步单击该行也可以顺利进行，并且弹出窗口按预期显示。

我的问题在于通过单击弹出窗口外部的区域关闭弹出窗口。基本上，如果您使用过引导模式 ( http://twitter.github.io/bootstrap/javascript.html#modals )，您就会知道在弹出窗口之外有一个区域在后台隐约显示网页并且可以通过单击弹出窗口外部的区域来关闭弹出窗口 - 这不是通过弹出窗口中的“X”或关闭按钮，而是只需单击弹出容器外部。

尽管jQuery("#myModal").on('hide', function() {..});调用了将 的值设置$scope.$parent.showModal为 false 的$scope.$watch(..)方法，但永远不会触发 。
当用户以这种方式关闭弹出窗口后点击另一行时，虽然$scope.showModal设置为true，但$scope.$watch(..)仍然不会触发。

知道当用户以异常方式关闭弹出窗口时出了什么问题，这里有什么解决方案？

4

1 回答 1

1

每次范围属性在 Angular 监督之外发生变化时（例如 DOM 事件），您都需要引起一个$digest循环。

为此，请在更改属性后添加一个 $scope.$apply() 。

//When the popup is closed, change the value
jQuery("#myModal).on("hide", function() {
    $scope.$parent.showModal = false;
    $scope.$apply();
});

无论如何，正如@ganaraj 所说，请阅读Common Pitfall -> Dom Manipulation section。您必须将所有 dom 操作包含在指令中，而不是在控制器中。

于 2013-04-07T20:41:21.963 回答