CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
syabro
syabro

Reputation: 1887

How to set scope variable in isolate scope from link function

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

Upvotes: 1

Views: 2804

Answers (1)

michael
michael

Reputation: 16351

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

Upvotes: 3

Related Questions