Setting a scope variable in an isolate scope from a link function can be achieved by accessing the

Question

Setting a scope variable in an isolate scope from a link function can be achieved by accessing the

In my attempt to assign a variable within an isolate scope, I am encountering difficulties accessing the variable set in the linked function. Surprisingly, I can access the controller's variable without any issues.

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

To illustrate my point, I have created a plunker: http://plnkr.co/edit/lUBvIkF4fKXkEgujJpuU?p=preview

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

Everything is functioning as intended.

1) If you set 'propVar' : '=', it signifies that your directive element has an attribute prop-var. However, this is not the case. To use the prop attribute, you must define your isolated scope like this: 'propVar' : '=prop'.

2) The child elements of your directive are linked to the controller's scope rather than the directive's scope. If you want the child elements to be part of your directive, you can utilize a template within 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);
        },
    }
})

Check out the updated PLUNKR: http://plnkr.co/edit/MHXXkmPdtfAUqtre4Fbg?p=preview

Answer 2

Everything is functioning as intended.

1) If you set 'propVar' : '=', it signifies that your directive element has an attribute prop-var. However, this is not the case. To use the prop attribute, you must define your isolated scope like this: 'propVar' : '=prop'.

2) The child elements of your directive are linked to the controller's scope rather than the directive's scope. If you want the child elements to be part of your directive, you can utilize a template within 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);
        },
    }
})

Check out the updated PLUNKR: http://plnkr.co/edit/MHXXkmPdtfAUqtre4Fbg?p=preview

Setting a scope variable in an isolate scope from a link function can be achieved by accessing the

Answer №1

Similar questions

Troubleshooting Problem with ListItem Alignment in Material UI v0 involving Custom Avatar Component

Tried to enroll the RCTBridgeModule category as RCTFileReaderModule

The function body.getReader() doesn't seem to be functioning properly on Ubuntu

"The Vue component's data is successfully updating within a method using setInterval(), however, the changes are not reflected in the DOM

Oops! The angular app encountered an error: TypeError - it cannot read property '0' of undefined. Time to debug

Steps for converting a file with JSON objects to a JSON array

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

Is there a faster way to sort this data with Javascript (or JQuery for extra speed)?

Having trouble with $addToSet and $push not working in updates using Mongoose with MongoDB in Node.js?

AngularJS json parsing error

Ways to trigger an event or invoke a function after initializing Stripe JS

Managing media file transfers using multer and mongodb in a Node.js environment

Challenges with creating an increment and decrement form component using Vue

Obtaining the string representation of an HTML element's DOM in JavaScript without including its child elements

Shielding against JSON Vulnerability - fortifying asp.net MVC with angular

What is the best way to update the $scope of a directive from another directive's controller in Angular.js?

Displaying a div after a successful form submission using Jquery

Node JS: Despite modifying the URL, the response remains unchanged

Using jQuery to eliminate accepting input from form field

Error Encountered While Submitting Email Form