Good day
I'm relatively new to Angular and directives, but I'm facing an issue with the scope (in my specific case). I have defined the directive as follows:
angular.module('ToolBarMod', ['ngAria'])
.controller('ToolBarCtrl', [function ($scope) {}])
.directive('svdToolBar', function ($translate) {
return {
restrict: 'E',
replace: true,
scope: {
id: '@id',
name: '@name',
labelHeader: '@labelHeader',
tooltipLabelSave: '@tooltipLabelSave',
enableSave: '@enableSave',
onClickSave: '&onClickSave',
onChange: '&onChange'
},
template: '<div id="{{name}}" class="md-toolbar-tools">' +
'<md-toolbar md-scroll-shrink>' +
'<div class="md-toolbar-tools title margin-8">'+
'{{labelHeader}}' +
'<md-button id="save" class="tool toolBarButton" ng-disabled="{{enableSave}}" aria-label="{{ \'GEN-SAVE\' | translate }}" ng-click="onClickSave">' +
'<md-tooltip>'+'{{tooltipLabelSave}}'+'</md-tooltip>' +
'<ng-md-icon icon="save"></ng-md-icon>'+
'</md-button>'+
'</div>' +
'</md-toolbar>' +
'<div flex></div>' +
'</div>'
}
});
})();
and in my HTML file, I use the directive in this manner:
<svd-tool-bar id="toolbar" labelHeader="appraisal" name="toolbar" tooltipLabelSave="{{ 'VAL-NEW-I-N' | translate }}" enableSave="true"/>
However, I seem to be missing something regarding the 'labelHeader' attribute. When the HTML loads, the 'appraisal' value is not displayed. The 'labelHeader' remains empty.
Any insights on what might be going wrong would be greatly appreciated!
Thank you in advance