CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
HelpMeStackOverflowMyOnlyHope
HelpMeStackOverflowMyOnlyHope

Reputation: 5012

AngularJS - Is it possible to pass attr value in Directive link function directly to template?

I was wondering if its possible to access attrs that were passed into a custom directive directly within the template config? So something like this... which currently isn't working?

angular.module('msDirectives', [])
    .directive('msPerson', function(){
        return{
            restrict: 'E',
            link: function(scope, element, attrs){
            },
            template: '<h1>{{attrs.firstName}}</h1>',
        };
    });

I realize I could assign attrs.firstName to scope within the link function to get this to work (like the following), just trying to understand whether scope is the only thing accessible within the template or whether attrs also get passed to it.

angular.module('msDirectives', [])
    .directive('msPerson', function(){
        return{
            restrict: 'E',
            link: function(scope, element, attrs){
                scope.name = attrs.firstName;
            },
            template: '<h1>{{name}}</h1>'
        };
    });

Upvotes: 0

Views: 944

Answers (1)

Estus Flask
Estus Flask

Reputation: 222780

The purpose of isolated scope (besides the isolation itself) is the assignment of attribute values to scope.

angular.module('msDirectives', [])
    .directive('msPerson', function(){
        return{
            restrict: 'E',
            scope: {
                name: '@firstName'
            },
            template: '<h1>{{name}}</h1>'
        };
    });

Upvotes: 1

Related Questions