Question

我正在使用带有Twitter bootstrap的AngularJS。

我有一张桌子，这张桌子属于家长控制器我有一个弹出窗口，这属于儿童控制器。

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

这是我当前代码的样子：

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(..)。

当用户关闭弹出窗口的异常方式以及可能的解决方案时，知道出了什么问题吗？

Answer 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操作，从不在控制器内。

AngularJS - 即使价值发生变化，也不会触发观察

1 个答案: