Ensuring Proper Sequence of Function Execution in Angular Directive

I'm a bit confused after reading the following two blogs:

Blog I: Eric W Green - Toptal

Order of execution 

Compile -> Controller -> PreLink -> PostLink

Blog II: Jason More

Order of execution

Controller -> Compile -> PreLink -> PostLink

The answer to the complex problem of the difference between controller and link is provided here -- use code in the controller if it's needed before compilation OR write it in the link if the code should run after compilation.

However, Blog I states that both run after compilation. Can anyone suggest which one is correct?

javascriptangularjsfunctionmodel-view-controllerangularjs-directive

Answer №1

The idea may seem complex at first, but once you grasp the actual process, it will become clear.

The sequence of execution is as follows: Compile -> Controller -> Pre-Link -> Post-Link

To gain a better understanding, take a look at this informative article; it really helped me out.

I hope this explanation is helpful to you.

Cheers

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best way to execute multiple actions within a single gulp task?

Is there a way to execute multiple actions within one gulp task? I have tried using event-stream's merge feature following the example in How to perform multiple gulp commands in one task, but it doesn't work properly when combined with the del p ...

javascriptnode.jsnpmgulp

Implementing cross-app module injection in Node.js

I have two node apps/services that are currently running together: 1. the main app 2. the second app The main app is responsible for displaying all the data from different apps in the end. Currently, I have taken some code from the second app and integra ...

javascriptnode.jsexpressamdmicroservices

"Exploring the interoperability between Angular's ngSanitize and ngDragDrop

Currently, I am facing compatibility issues within my Angular application when trying to incorporate both ngSanitize and ngDragDrop. The ngDragDrop plugin can be accessed at , while ngSanitize documentation is available at https://docs.angularjs.org/api/ng ...

angularjsdrag-and-dropdraggablecompatibilityngsanitize

The specified file ngx-extended-pdf-viewer/assets/pdf.js cannot be found

I have integrated the ngx-extended-pdf-viewer package in my Angular application using npm to enable the display of PDF content. According to the setup instructions, I have added the following configuration in my angular.json file: "assets": [ ...

javascriptnode.jsangulartypescriptpdf

How can I design a trapezoid with see-through borders and background?

Using various CSS border tricks, it's possible to create a trapezoid shape. Additionally, setting the border-color to rgba(r,g,b,a) can make it transparent. However, is there a way to create a trapezoid with both transparent borders and background? ...

javascripthtmlcsscss-shapes

Tips for modifying an HTML element's attribute when a button is clicked, both in the client and server side

Context: This question delves into the fundamental concepts of AJAX. I have been studying this tutorial along with this example for the JavaScript part, and this resource (the last one on the page) for the PHP segment. Imagine a scenario where a JavaScri ...

javascriptphpajaxxmlhttprequest

Is there a way to access the Context in the _app.js file in Next.js with React?

Hey there! I'm currently working with a context provider file and _app.js file. I need to access AppContext in the _app.js file. Can anyone provide guidance on how to successfully access the AppContext within the _app.js file? I have imp ...

javascriptreactjsnext.js

When navigating between Dynamic Pages using NuxtLink, the store data is not accessible

Check out the demo below. Click here for stackblitz When transitioning from a top page to a post page, the correct content is displayed. However, moving from one post page to another does not display the correct content immediately. Reloading the page w ...

javascriptvue.jsnuxt.js

Recover information from an angular directive

I have developed a unique directive named my-tree, and I am utilizing this directive in a view named example-tree-view.html as illustrated below: <my-tree ng-model="sampleTreeView.listNodes" ... /> The controller for this view is called sampleTreeV ...

angularjsangularjs-directive

Stopping a NodeJs file running on an Ubuntu server

After enlisting help to install a Js script on my server, I encountered an issue where changes I made to the scripts/files were not reflected in the browser. After scouring the internet for answers for about 24 hours, I discovered that Js scripts need to b ...

javascriptnode.js

Mysterious attributes - utilizing react and material-ui

In my current project, I am using react and material-ui. This is the code snippet from one of my components: <Dialog title="Dialog With Actions" actions={actions} modal={false} open={this.state.open} onRequestClose={this.handleClose ...

javascriptreactjsmaterial-ui

Enhancing the efficiency of nested ajax calls loop

Disclaimer: While the final result is successful, I am struggling to comprehend the sequence in which a loop of nested ajax calls operates. Essentially, I have two ajax calls that fetch data from an external API using curl GET requests. They both rely on ...

javascriptjqueryajaxcurlnested-loops

Updating the query parameters/URL in Node.js's request module

In my Express.js application, I am utilizing the npm request module to interact with an internal API. The options passed to the request function are as follows: requestOptions = { url : http://whatever.com/locations/ method : "GET", json : {}, qs : { ...

javascriptnode.jsexpressnpmhttp-get

Synchronizing the call of various views in an Angular application

I'm currently working on an angular single page application with a specific structure in mind. "app.parent - main parent state" "app.parent.childState - child state" "app.parent.childSatate" includes 4 different named views. My goal is to display so ...

javascriptangularjsangular-ui-router

Encountering a '[BABEL] Cannot find module' error message after setting up a new PC

Recently, I configured my development environment on a fresh operating system. When I navigated to my project folder and executed the commands: npm install npm run serve I encountered the following error message: Module build failed (from ./node_modules ...

javascriptnode.jsvue.jswebpack

sent a data entry through ajax and performed validation using jquery

Is there a solution to validating the existence of an email value using ajax after validation work is completed? Despite attempting to check for the email value and display an alert if it exists, the form continues to submit regardless. See below for the ...

javascriptphpjqueryhtmlajax

Incorporating a basic search feature into Ajax

At the moment, only results appear when you modify the query. I want to modify this to allow user input. I have set up the fields, but I need help adjusting my ajax code to accept the new search criteria which is crucial for functionality. This is what m ...

javascriptjqueryajaxjsonsearch

What is the best way to differentiate and analyze new AJAX output from previous data using div elements?

Embarking on a project to develop a high/low game using JavaScript, I encountered a perplexing issue where the displayed numbers seemed to be out of sync with the variables stored. This discrepancy left me scratching my head as I struggled to get them to a ...

javascriptajax

Updating All Values in "ng-repeat" Using AngularJS

I am facing an issue with ng-repeat where only the last value of "frais" is being updated. Is there a way to update all values displayed by ng-repeat? Here is the code from file.html: <ion-content class="padding" ng-controller="FactureAdminCtrl" ng-re ...

phpangularjsionic-framework

The second div element remains unselected in jQuery

Below is the example of an HTML structure: <span id="17">yes here</span> <div class="PricevariantModification vm-nodisplay"></div> <div class="PricesalesPrice vm-display vm-price-value"> <span class="a"></span> ...

javascriptjqueryhtmlcss