Phil 12.23.14

8:00 – 5:30 SR

  • DB Backups
  • Angular
    • Keeping scatterplotTest1 intact in case I break things
    • Adding a controller at the panel organization level. This should closely mimic how tabs should work – selecting a tab causes the others to go to the ‘unselected’ state. the getCssClass() call should still work though, which is nice.
    • Help from StackOverflow:
    • To make this work, the directives need to communicate, which requires a controller. To manage the instances, we must use the ‘requires’ tag. Here’s what I did:

First, excerpts from the javascript directives

sp.directive('floatingPanelManager', [function() {
   return {
      restrict: 'AE',
      scope: {
         panelObj: '='
      templateUrl: 'directives/floatingPanelManager.html',
      controller: function($scope) {
         var currentId = -1;
         var hideAllPanels = false;
         $scope.panels = [];
         this.registerPanel = function(panelScope){
         this.selectPanel = function(panelId) {
            currentId = panelId;
            var ps;
            for (var i = 0; i < $scope.panels.length; i++) {
               ps = $scope.panels[i];
               if(ps.$id === panelId){
                  ps.selected = !ps.selected;
                  hideAllPanels = ps.selected; // hide all the other panels if one is selected
                  ps.selected = false;
         this.getHideAllPanels = function(){
            return hideAllPanels;
sp.directive('floatingPanel', ['$sce', function(sce) {
   return {
      restrict: 'AE',
      require: '^floatingPanelManager',
      scope: {
         panelObj: '=',
         stageObj: '='
      templateUrl: 'directives/floatingPanel.html',
      link: function(scope, element, attr, panelMgr) {
         scope.getCssClass = function(){
               return 'selectedClass';
               return 'hiddenClass';
               return 'hoverClass';
            return '';
         scope.selectPanel = function(){
            var sid = scope.$id;

And here’s the directive html:

<div class="floatingPanelStyle" ng-class="getCssClass()"
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false"
     ng-style="{'transform':getTransformString()}" ng-bind-html="getHtml()"></div>
  • In this case, I have a ‘floatingPanel’ directive that requires (watch the spelling!!!)  ‘floatingPanelManager’. The use of ‘require’ means that angular will inject the required instance as the fourth argument to the link function.
  • It’s important to remember that we have to have a single instance here. In this case, that instance has an array of all the floating panels that are being managed. And that array needs to be attached to the $scope passed into the controller. As I understand it, that means that it is attached to the DOM.