You should consider adopting a more 'Angular way' of thinking. :)
Addressing timing issues
Currently, you are constructing the directive content within the link function, which assumes that all content is available at that moment. However, this assumption is incorrect, especially when dealing with asynchronous operations. To overcome this, Angular promotes using two-way bindings for manipulating the DOM. A better approach would be to define a template for the directive to display the content.
function myDirective() {
return {
...
template: '<div>{{someVar}}</div>',
...
};
}
By incorporating this technique and adding a template to your transformAndOutput directive, you can ensure that the DOM updates whenever the content changes due to asynchronous callbacks.
Check out the DEMO here
In the provided demo, both lines displaying
The value of content as called by loadData2 is: 2.0.171.17
, may not meet your expectations, highlighting another issue.
Dealing with scoping conflicts
It's recommended for directives to have their own isolated scope to prevent interference with the host scope or other components. The conflict in your code arises from both directives modifying the host scope variables. To resolve this, utilize the scope option to encapsulate each directive's scope.
function myDirective() {
return {
...
scope: true,
...
};
}
Keep in mind that directive scopes do not inherit the host scope but can access some data if needed. For nested directives, such as transformAndOutput within loadData, inheritance allows accessing parent directive properties. Ensure to specify this dependency by including require: '^loadData' where necessary.
Update your loadData1 and loadData2 directives with scope: true to establish individual content and callingFunction. You can safely remove these variables from the controller once implemented.
View the updated DEMO here
Lastly, adhere to standard naming conventions applying HTML-like names in HTML attributes and JS-like names in JavaScript functions for consistency. Angular will handle the conversion seamlessly.
Updated code snippet
app.directive('loadData1', function($http) {
return {
restrict: 'E',
replace: true,
scope: true,
link: function(scope, elm, attrs) {
scope.callingFunction = 'loadData1'
// Additional code goes here
},
};
})
app.directive('transformAndOutput', function() {
return {
restrict: 'E',
scope: true,
template: '<p>The value of content as called by {{callingFunction}} is: {{content}}</p>',
};
})