Inconsistency in displaying updated values in AngularJS directives

Question

Inconsistency in displaying updated values in AngularJS directives

I am facing an issue where I need to postpone the compilation of a child directive until a promise in the parent directive's prelink function is resolved and a value (CONFIG) is updated.

Within the Parent's preLink:

    somePromise.then(function(){ 
       CONFIG = 1;
       elem.append($compile(template)(scope));
    }

The template includes the Child directive, so the Child's prelink function runs after the promise is fulfilled. However, when trying to access CONFIG within the Child's prelink, it still retains its old value ({}).

Can anyone shed light on why this is happening? Fiddle: http://jsfiddle.net/RmDuw/642/

javascript angularjs directive prelink

Answer 1

Answer №1

When you use the CONFIG = 1 statement in your directive, you are actually updating a local variable that is injected by Angular's value service.

Since this local variable is being modified, the content passed to the child directive remains unaffected.

If you want to pass a value to the child directive through the value service, you need to do something like CONFIG.value = 1.

This approach works because even though they are local variables specific to each directive, they both reference the same service. Therefore, any changes made to the object they point to will be visible to both references.

Answer 2

When you use the CONFIG = 1 statement in your directive, you are actually updating a local variable that is injected by Angular's value service.

Since this local variable is being modified, the content passed to the child directive remains unaffected.

If you want to pass a value to the child directive through the value service, you need to do something like CONFIG.value = 1.

This approach works because even though they are local variables specific to each directive, they both reference the same service. Therefore, any changes made to the object they point to will be visible to both references.

Inconsistency in displaying updated values in AngularJS directives

Answer №1

Similar questions

Unifying a Form with AngularJS Components

It is not possible to invoke a function within the mounted() lifecycle hook

Switching videos dynamically with JavaScript while utilizing Bootstrap to enable playback in a floating window

Some variables are not being properly tracked by Google Analytics

A guide to resizing images to fit the page in React using Bootstrap

Sending variables to another function in JavaScript

Close the overlay by clicking outside of it

Python's Selenium execute script does not support setTimeout function

What term is used to describe this in recursion?

Improving search engine optimization by creating efficient links with JavaScript and PHP

How to retrieve multiple checked values from checkboxes in Semantic UI React

Data cannot be transferred to a child element unless it has been initialized during the definition phase

What is the best way to retrieve a property with a period in the method name in JavaScript?

Mock asynchronous calls in a React component using Jest

The unexpected identifier 'express' was encountered in the import call, which requires either one or two arguments

Managing cookies using JavaScript functions

What is the best way to extract all <tr> elements from a <tbody> and then convert them into a String?

Unlocking the power of .NET with JavaScript

At what point does the Express req.query variable receive various types of data?

JavaScript for returning a boolean output