AngularJS - What is the right way for this? - angularjs

Question

I created a page, in which you can view lots of details on a user, in panels.
Every panel contains some information, received from a service, and sometimes has actions on it.
I have about 10 panels, and the viewer decides what he wants to see.
Is it right to make each of those panels a separate controller,
OR only panels with actions need to be in a separate controller, OR all the panels in one controller?
If every panel is a controller, and my code is this:
div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body" ng-controller="historyPanel" ng-include="'panels/history.html'"></div>
</div>
Is there a way for me to know if a panel is empty?
For example, I have an history panel, that I wanna show only when there is history to show, and I don't wanna show "No History", just wanna hide that panel.
But I do want to keep the panel code outside of the history.html view.

Answer 1

You should consider creating a directive for this. You can either create a single directive that contains all 10 panels, and provide an attribute to specify which panel to show, or you could create 10 different directives.
Something like:
<my-panel panel="history" ng-show="userPanel.history.display"></my-panel>
<my-panel panel="settings" ng-show="userPanel.settings.display"></my-panel>
<my-panel panel="friends" ng-show="userPanel.friends.display"></my-panel>
<my-panel panel="music" ng-show="userPanel.music.display"></my-panel>
Then your scope controller might have something like:
app.controller('MyController', function($scope) {
$scope.userPanel = {
history: { display: true },
settings: { display: true },
friends: { display: true },
music: { display: false }
}
});
This way, you could load data from a service which has the user preferences for which panels are displayed.

Answer 2

Try something like this, try not to inject $scope at all cost. :)
function PanelCtrl() {
'use strict';
var ctrl = this;
ctrl.panels = [{
"id": 0,
"name": "Lucia Oconnor",
"history": "my history"
}, {
"id": 1,
"name": "Stevenson Mcintosh",
"history": "my history"
}, {
"id": 2,
"name": "Spears Sims",
"history": "my history"
}];
}
function panel() {
'use strict';
return {
restrict: 'E',
scope: {},
bindToController: {
//Depends what youd like to do with the PanelCtrl
//'&': use a function on that ctrl
//'=': two way data binding
},
controller: 'PanelCtrl as ctrl',
templateUrl: './templates/panel.ng.html'
};
}
angular
.module('app', [])
.controller('PanelCtrl', PanelCtrl)
.directive('panel', panel);
This would be that template:
//also if static content might want to use--one time bindings.
// that would be ::panel.name
<div class="panel panel-default" id="panel_{{panel.id}}">
<div class="panel-heading">{{Panel.name}}</div>
<div class="panel-body">{{Panel.history}}</div>
</div>
This would be your html:
//be sure to include track by, major perf gains.
<div class="container" ng-repeat="panel in ctrl.panels track by panel.id">
<panel bind="here" ng-if="ctrl.history.length"></panel>
</div>