CODEWITHSUNDEEP
stringangularjsdependency-injectiondirective
dulan
dulan

Reputation: 1604

AngularJS DI string into directive

I'm injecting value into custom directive, but the value is not showing in directive template:

app.value('messageString', {
    'to' : 'TO',
    'startDate' : 'START DATE',
    'endDate' : 'END DATE',
});
app.directive('dateRangePicker', function(messageString) {
    return {
        replace:    true,
        restrict:   'EA',
        template:   '<div class="input-group">' + 
                        '<input type="text" class="form-control" placeholder="{{messageString.startDate}}" id="start-date" ng-model="startdate">' + // doesn't work in placeholder
                    '</div>',
        link: function(scope, element, attributes) {
            console.log(messageString.startDate);    // works here
        }
    };
});

So what went wrong?

Upvotes: 0

Views: 43

Answers (1)

Josep
Josep

Reputation: 13071

You need to set the messageString into the scope if you are going to use it in the template, like this:

app.value('messageString', {
    'to' : 'TO',
    'startDate' : 'START DATE',
    'endDate' : 'END DATE',
});
app.directive('dateRangePicker', function(messageString) {
    return {
        replace:    true,
        restrict:   'EA',
        template:   '<div class="input-group">' + 
                        '<input type="text" class="form-control" placeholder="{{messageString.startDate}}" id="start-date" ng-model="startdate">' + // doesn't work in placeholder
                    '</div>',
        link: function(scope, element, attributes) {
            scope.messageString=messageString;
            console.log(messageString.startDate);    // works here
        }
    };
});

Upvotes: 2

Related Questions