如何以编程方式阻止Angular UI手风琴在点击时打开

时间:2014-03-14 07:58:22

标签: angularjs accordion angular-ui angular-ui-bootstrap

基本上我想在手风琴打开之前做一些验证,我不想在标题中添加额外的按钮。所以,让我们说有人点击手风琴标题,而不是关闭(它最初打开),我想添加一些条件代码,如果某些情况不符合,手风琴会赢得'移动/改变/关闭。

我尝试添加ng-click="stop()",其中stop()$event.stop = function (e) {e.stopPropagation();}但它没有用。

我也试过ng-click="$event.stopPropagation"但也没有工作。

请注意,我已更改指令而不是仅标题(h4)可点击,整个手风琴标题均可点击。

如果我在标题中添加了一个按钮并在其上附加了e.stopPropagation,它就可以正常工作,但这不是我想要的。

有可能吗?

1 个答案:

答案 0 :(得分:1)

accord ui的手风琴也使用指令折叠(当你的模板加载时验证你将在所有手风琴行的手风琴描述中找到它的DOM)来决定手风琴内容是否打开。因此,如果您可以访问accordion指令的范围,则可以解决您的问题。为此,我可以看到两种方式

要么在Angular-ui的折叠模板中进行一些小改动,即传递2个参数 1.决定是否应根据某些验证进行崩溃 2.a控制器变量,在完成所有验证后,您将设置为true

在崩溃指令内部

对变量2应用监视,并在完成所有验证后将此变量设置为true,如果为真,则崩溃指令将继续,并且只有将变量1设置为TRUE,如果变量1为假,则上述情况都不会发生,即没有等待验证。

第二种情况:

如果您的手风琴有4行,即A,B,C,D,那么

$scope.$$childHead.$$childHead

允许您访问A,现在您需要已经通过角度手风琴模板插入的折叠指令范围,因此请转到此

 $scope.$$childHead.$$childHead.$$childHead.isOpen

这个isOpen变量是一个布尔值,折叠指令这个变量决定你的手风琴是否打开并且它是孤立的,即B,C和D也有自己的isOpen

访问B的doOpen:

$scope.$$childHead.$$childHead.$$nextSibling.isOpen

代表C

 $scope.$$childHead.$$childHead.$$nextSibling.$$nextSibling.isOpen

等等。在这些isOpen变量上应用监视,并防止它们变为真,直到您的验证完成为止!但是第二种方法可能不是最适合的情况,如果你只需要对特定行进行验证,那么它可能会运行良好,但仍然可以检查适合你的情况。