CODEWITHSUNDEEP
javascriptangularjsangular-directive
Yago
Yago

Reputation: 427

Scope in angular directive not binding well

Good afternoon

I'm a newbie in angular ,and directives, and something with the scope it's not running ok ( in my case, of course :)).

I have defined the following directive : 

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 titulo 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 the my html uses the directive this way

<svd-tool-bar id="toolbar" labelHeader="tasacion" name="toolbar" tooltipLabelSave="{{ 'VAL-NEW-I-N' | translate }}" enableSave="true"/>

in case of the attribute 'labelHeader' , there's something I'm not doing right . So , when the html it's loaded , I can't see the attribute 'tasacion' . The element 'labelHeader' it's empty .

What am I missing ?

Thanks in advance

Upvotes: 0

Views: 56

Answers (2)

Tomer
Tomer

Reputation: 17940

Angular expects the attribute names to be separated by '-' (just like the directive name).

So instead of labelHeader use label-header etc.

Upvotes: 2

Makarov Sergey
Makarov Sergey

Reputation: 932

Use label-header in the attribute

<svd-tool-bar id="toolbar" label-header="tasacion"

Upvotes: 3

Related Questions