2016-05-26 16 views
0

私は、ほとんどのビジュアルでBootstrapとD3を使ってAngularアプリを開発しています。私はhereのアコーディオン指令を使用しています。私は、アコーデオングループが開いたり閉じたりしたときに、私のD3チャートの変更をトリガーしたいと思います。どのように私はこれにフックできますか?私は、コールバックを実行する方法、モデルを更新する方法、またはアコーディオンを直接クエリする方法が必要だと考えています。ブートストラップアコーディオンがAngularアプリケーションで開いたり閉じたりしたときに、コードを実行するにはどうすればよいですか?

私はthis SO questionがうまくいくように思えますが、質問は古くなっていますので、これを行うより良い方法が今あると思っています。

+0

FALSEにシンプルなロジックを使用しています。何が起きているのかは明らかです。あなたはd3ディレクティブにそのプロパティを渡して$を見ることができます。 – steezeburger

答えて

1

は大丈夫解決策のように思えるTRUEフラグと

<!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> 
関連する問題