当我的Angular应用程序中的Bootstrap手风琴打开或关闭时,如何运行一些代码?

时间:2016-05-26 04:55:04

标签: javascript angularjs twitter-bootstrap

我正在开发一个使用Bootstrap和D3的Angular应用程序来处理大多数视觉效果。我正在使用here的手风琴指令。我想在手风琴组开启和关闭时触​​发D3图表的变化。我怎么能挂进这个?我想我需要一种方法来运行回调,更新模型或直接查询手风琴。

我发现this SO question似乎可以正常工作,但由于问题已经过去,我希望现在有更好的方法可以做到这一点。

1 个答案:

答案 0 :(得分:1)

使用标志为TRUE和FALSE

的简单逻辑
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div ng-controller="AccordionDemoCtrl">
        <uib-accordion close-others="oneAtATime">
            <uib-accordion-group heading="Accordion-1" ng-click="call(is_open)">
                Accordion-1
            </uib-accordion-group>
            <uib-accordion-group heading="Accordion-2">
                Accordion-2
            </uib-accordion-group>
        </uib-accordion>
    </div>
</body>
</html>

<script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) 
    {
        $scope.is_open = false;
        $scope.call = function(status)
        {
            if(status==true)
            {
                $scope.is_open = false;
                console.log("close")
            }
            else
            {
                $scope.is_open = true;
                console.log("open")
            }
        }
    });
</script>