How to set scope variable in isolate scope from link function

Question

I'm trying to set variable in isolate scope, but I can't access variable that I set in linked function in isolate scope and also I can access controller's variable.

app.directive('myDir', function($timeout) {
    return {
        restrict: 'A',
        scope: {
            'propVar': '='
        },
        link: function(scope, elem) {
            console.log(elem)
            scope.linkVar = 'It works!' 
            console.log(scope);
        },
    }
})

I created plunker to show what I mean: http://plnkr.co/edit/lUBvIkF4fKXkEgujJpuU?p=preview

michael · Accepted Answer · 2014-01-28 17:40:54Z

3

It work's all as it should be.

1) If you define 'propVar' : '=' it means that your directive element has an attribute prop-var. This is not the case. If you would like to use the prop attribute you have to define your isolated scope in this way: 'propVar' : '=prop'.

2) The child elements of your directive are bound to the controllers scope not to the directive scope. If you would like the the child elements to be part of your directive you may use a template in your directive:

app.directive('myDir', function() {
    return {
        restrict: 'A',
        template: '<div><p>linkVar: {{ linkVar }}</p><p>propVar: {{ propVar }}</p><p>foo: {{ foo }}</p><button ng-click="foo=\'directive sucks\'">press me</button></div>',
        scope: {
            propVar: '=prop'
        },
        link: function(scope, elem) {
            console.log(elem)
            scope.linkVar = 'It works!' 
            console.log(scope);
        },
    }
})

see the modified PLUNKR: http://plnkr.co/edit/MHXXkmPdtfAUqtre4Fbg?p=preview

answered Jan 28, 2014 at 17:40

michael

16.4k8 gold badges57 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

syabro Over a year ago

Yeah, but problem is that I don't want to use template. I want isolated scope for stuff in innerHTML of my div. Is it possible?

syabro Over a year ago

Hmm. It works with a little patch: template: function(tElement, tAttrs) { return tElement[0].innerHTML; } But thanks for the answer ;)

Collectives™ on Stack Overflow

How to set scope variable in isolate scope from link function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related