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: http://stackoverflow.com/questions/15672709/how-to-require-a-controller-in-an-angularjs-directive
- 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){ $scope.panels.push(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 }else{ 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) { panelMgr.registerPanel(scope); scope.getCssClass = function(){ if(scope.selected){ return 'selectedClass'; } if(panelMgr.getHideAllPanels()){ return 'hiddenClass'; } if(scope.hover){ return 'hoverClass'; } return ''; } scope.selectPanel = function(){ var sid = scope.$id; panelMgr.selectPanel(sid); } } }; }])
And here’s the directive html:
<div class="floatingPanelStyle" ng-class="getCssClass()" ng-click="selectPanel()" 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.