Angular JS - there is a way to pass a directive attribute to a template

Question

On the page

<rn-text-edit rn-scope="profile.first_name"></rn-text-edit> 

on js

 app.directive("rnTextEdit", function () { return { restrict: 'E', replace: true, template:'<span>{{'+rn-scope+'}}</span>' } }); 

I know that I can replace the DOM and access the attribute through a link. I wonder if there is a way to pass a directive attribute to a template.

Answer 1

If you just display the value:

 <rn-text-edit rn-scope="{{profile.first_name}}"></rn-text-edit> 

-

 app.directive("rnTextEdit", function () { return { restrict: 'E', replace: true, scope: { rnScope: '@' }, template: '<span>{{rnScope}}</span>' } }); 

If the directive needs to change the value, you can use '=' and skip double curls.

fiddle

more information about the scope and '@' in the Angular directives page