AngularJS - 即使值已更改，也不会触发$ watch。

我正在使用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(..)再次未触发。

任何想法当用户关闭弹出窗口异常的方式时会出现什么问题，以及这可能是一个解决方案？

来源

2013-04-07 callmekatootie

你见过http://docs.angularjs.org/misc/faq吗？尤其是常见陷阱 - > Dom操纵部分？ – ganaraj 2013-04-07 19:55:06

谢谢你指出来;尽管我需要更多地了解AngularJS以了解为什么我必须将DOM操作移动到指令中...... – callmekatootie 2013-04-15 06:27:31

每当范围属性在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-07 20:41:21

我将代码移入指令中，即使发生了问题。我不得不使用'$ scope。$ apply（）'来使它在指令内部工作（我想不然）。总之，显然，正确的方法是$ scope。 - 与异常有关。其解释[这里]（http://www.youtube.com/watch?v=WqmeI5fZcho）约24分钟标记... – callmekatootie 2013-04-15 06:25:55

AngularJS - 即使值已更改，也不会触发$ watch。

回答

相关问题