on the Page

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

on the js

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

I know I can replace the DOM and access the attribute through link. I wonder if there is a way of passing the directive's attribute to a template.

on the Page

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

on the js

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

I know I can replace the DOM and access the attribute through link. I wonder if there is a way of passing the directive's attribute to a template.

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow asked May 1, 2013 at 20:47 simmusimmu 7311 silver badge55 bronze badges 1

• Can the directive use an isolate scope? – Mark Rajcok Commented May 1, 2013 at 21:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

If you are just displaying 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 modify the value, you could use '=' and skip the double curlies.

fiddle

more info on scope and '@' in the Angular Directives page