I am trying to create an http link for the a tag by adding a line of code in the html.
<a href="{{getLink(url)}}">My link</a>
This is how it is defined in the controller:
$scope.getLink = function(inputUrl){
$http.get(inputUrl).success(function(data){/*.....*/});
}
However, I am facing an issue with AngularJS getting stuck in an infinite cycle. Can someone suggest the right design approach?
Explained in a different response, watched expressions are evaluated during each digest cycle and compared to their previous values through dirty checking. If a change is detected, another round of digestion begins as modifications in one value may impact others.
If a circular dependency occurs (even within a single expression), it can lead to an endless loop that Angular handles by stopping after 10 iterations.
In your case, the getLink function returns a promise (from $http) which isn't synchronously awaited by Angular bindings.
The solution is to initiate the $http request and assign its result to a ViewModel property in the callback function. This property will then be bound to the <a> element:
function getLink(){
$http.get(inputUrl)
.success(function(data){
$scope.url = data.data;
});
}
You can trigger getLink when your controller initializes, for instance.
In the View, simply bind the url variable to the ng-href attribute (not href):
<a ng-href="url">My Link</a>
When you include an Angular expression in the View using {{expression}}, it will automatically be added to the watch list of the current scope.
Angular employs a technique known as dirty checking to achieve two-way binding. Whenever specific events occur, such as user input, model changes, or completion of $http requests, Angular scans through the watch list to determine if any watched values have been altered. This process is referred to as the digest loop.
In this context, the mentioned specific events trigger the execution of a function called getLink within the expression. Consequently, every time Angular initiates a dirty check/digest loop, the function is re-executed to validate if its return value has changed.
The issue arises when the function getLink involves a $http request. Upon executing this function, Angular triggers another round of dirty checking, leading to the repeated execution of the same function and causing an infinite loop.
In summary: refrain from incorporating $http calls within angular expressions to prevent such loops from occurring.
Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...
Is there a way to deconstruct an array, assign it to a variable, and then pass the value to another deconstructed variable all in one line of code? Take a look at what I want to achieve below: const { prop } = [a] = chips.filter(x => x.id == 1); Typic ...
I am currently facing a simple issue. I am attempting to implement a click event on dynamically generated elements such as this: $(document).ready(function(){ $('ul').on('click', 'li.clickable', function() { conso ...
I notice this pattern frequently view: <input ng-model="vm.model"> <button ng-click="vm.method(vm.model)"></button> controller: function Controller() { var vm = this; this.method = function(parameter) { // perform acti ...
Recently while using AngualrJS and Batarang (the chrome plugin for inspecting $scope variables), I made an interesting discovery. It seems that you can actually inspect the scope even in production. Imagine a scenario where a website has a page with a sco ...
I'm currently working on developing a Rails and AngularJS application. Let me share my file structure with you: app/ assets/ javascript/ templates/ home.html partial.html My goal is to include the content of the partial.html.e ...
I have a creative idea to design a board with colorful squares. My concept involves using an array of 4 colors and assigning each square a random color from that array. Currently, I am generating n random colors in the colors.js file: export const randomU ...
While my opacity style is triggered when the page is scrolled down, I am facing an issue with my transform scale not working as expected. Any suggestions on how to troubleshoot this or any missing pieces in my code? Codepen: https://codepen.io/anon/pen/wy ...
Encountered an error while running the npm install command. angular#1.2.1 bower_components\angular npm ERR! peerinvalid The package karma-requirejs does not satisfy its siblings' peerDependencies requirements! npm ERR! peerinvalid Peer <a hre ...
When working on a graph using d3.js, one key step is setting up the scales for the axis. The data for the graph is stored in a Json file with multiple arrays, each representing different regions and years: [{ "id" : "AustraliaNewZealand" , "year" ...
I attempted to create a directive that would swap out a CSS link with an inline style definition. Check out the functional version here. Now, I am hoping to achieve the same functionality using interpolation, so that I don't have to manually set the ...
Using an API call, I retrieve some data. getPosts(postRequest: PostRequest): void { this._postService.getPosts(postRequest).subscribe(result => { const postList = result as PostList this.posts = postList.posts }); ...
Exploring the possibility of creating an offline React app (not React-Native) for iOS deployment. I'm working on a learning project and prefer to avoid dealing with React-Native. Wanting to leverage my web skills to develop an iOS app using only React ...
Currently, I am working on a validator that validates dates in the format of MM/YYYY. However, I am struggling to figure out how to access an attribute every time the model changes: <input id="my-date" validate-short-date data-max-date="{ ...
I am facing a challenge in passing a string into my JSON path for dynamic iteration. Here is what I am trying to achieve: *ngFor = 'let key of sector.{{id}}.batches' However, it only works when using a hardcoded id like NUM1: *ngFor = 'le ...
It has been interesting working on my project involving a scraper. The workflow is as follows: There are currently two scrapers. The data is parsed and pushed into an array for each individual scraper, then passed to the merge component. The merge compon ...
let userInputDate = "2019-05-26" // received from browser query e.g. "d=1&date=2019-05-26" let parsedDate = new Date(userInputDate) console.log(JSON.stringify(parsedDate)) output: #=> "2019-05-25T19:00:00.0000Z" Issue When the user's time ...
Context Currently, I am in the process of developing a find feature for a chat application. In this setup, each set of messages is identified by an index. The goal of the `find()` function is to retrieve each message collection reference from the `message ...
When new containers are added with ajax, the methods initialized for them stop working. How can I ensure that django-endless-pagination adds some JQuery to its generated containers? For instance: $(".fact").each(function() { $(this).css('border- ...
Looking at this image, I'm trying to find a way to collapse the breakfast row. Any ideas on how I can collapse either the entire tr or with a div? ...