Having two directives that display lists of documents, one for user-favorited documents and the other for user-pinned documents. The criteria for displaying these documents depend on the values of "pinned" and "favorite" within each document object:
document = {
pinned: true,
favorite: false
};
Each directive has its own title frame based on the type of documents being displayed. To streamline the code, a single template is used for both directives, with template strings and objects specified in separate controllers dedicated to each directive. Initially, it seemed the controllers were identical except for the template strings.
To address this issue, a decision was made to use the same controller (DocumentsPanel) for both directives, with the only distinction being in the link() function:
function documentsPanelFavorites(templateService, resources) {
return {
restrict: 'A',
templateUrl: templateService.getUrl('Documents/Panel/documentsPanel.html'),
controller: 'DocumentsPanel',
scope: true,
link: link
};
function link(scope) {
// Displaying favorite/pinned checkmarks for each document entry
scope.documentOptions = {
showFavoriteCheckmark: true,
showPinnedCherkmark: false
};
scope.panelName = resources.text.MODULE_TITLE_FAVORITE_DOCUMENTS;
scope.className = 'favorites';
scope.noDocumentText = 'No favorite for this user';
// Specifying which method of the document dataService to call for listed documents
scope.documentList = 'favoriteDocuments'
// etc.
}
};
The documentsPanel.html template then utilizes these strings defined within the controller's scope via link().
Note: Another directive used to represent a document in a list is included in documentsPanel.html, hence setting both showPinned and showFavorite options in each directive to ensure consistency. This directive is utilized elsewhere with all settings set to true.
Is this approach considered best practice? If not, what would be a more optimal solution?
Appreciate any insights!