directive link attrs don't work

Question

in html i call my directive with: <div godata-pagination count="{{pagination.count}}" size="{{pagination.size}}" page="{{pagination.page}}"></div>

then my directive looks inside:

function link(scope, element, attrs) {
    console.log('attrs: ' + attrs.size);
    scope.pagCount = attrs.count;
    scope.pagPage = attrs.page;
}
return {
    restrict: 'A',
    transclude: true,
    scope: {
        count: '@',
        size: '@',
        page: '@'
    },
    templateUrl: 'partials/godata/pagination.html',
    link: link
};

In the partial (partials/godata/pagination.html) i can access these variables (count, size and page). For 100% in partial i access originaly these three variables, no other in this scope.

But i will do something with these variables in function link. If i try to access these variables in function link through attrs, they are empty :(

What is wrong and/or what can i do?

UPDATE:

And with scope: false scope variable is undefined.

And why brings the line attrs.$observe('page', function(val) { console.log('$observe: ' + val); }); in function link two output ...one with and one without value?

UPDATE again:

function link(scope, element, attrs) {
    console.log('scope: ' + scope.size);
    console.log('scope: ' + scope);
    console.log('attrs: ' + attrs.size);
    console.log('attrs: ' + attrs);
    attrs.$observe('size', function(size) {
        console.log('$observe: ' + size);
        if(size) {
            scope.pagSize = size;
        }
    });
    console.log('after observe; pagSize: ' + scope.pagSize);
}

...bring me:

But scope.pagSize has a value in browser.

How can i work with these attributes in my directive, if i can't access them?!

http://stackoverflow.com/questions/11913841/accessing-attributes-from-an-angularjs-directive — Dfr, Feb 07 '16 at 13:49
Try to console log the all attr object and see what's inside. — Bazinga, Feb 07 '16 at 14:26
there is an empty Object `scope: [object Object]` and `attrs: [object Object]` — bitkorn, Feb 07 '16 at 17:56

score 0 · Answer 1 · answered Feb 07 '16 at 14:38

0

They are bound to the scope of the directive.

You can access them with scope.page, scope.count for example.

answered Feb 07 '16 at 14:38

Hristo Enev

2,421
18
29

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

As @Hristo Enev Answered : when you have isolated scope it is better to access attrs with scope.page or scope.count

but if you insist to do that with attribute,

this is the way:

attrs.$observe('page', function(val) { console.log(val) })

results in the value of page attribute.

Inside the linking function, you should use $observe() to get interpolated value.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 07 '16 at 15:30

Ahmad Mobaraki

7,426
5
48
69

directive link attrs don't work

2 Answers2