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.
You must be logged in to post a comment.