Aligning event with angular (similar to the 'join()' function in threads)

I am searching for a straightforward equivalent to join() for threads in Angular.

In my Controller:

vehiclesService.getVehicles().then(function(sth){
    $scope.vehicles = sth.data;
    $scope.isend();//this call is not ideal
});
vehiclesService.getFitment().then(function(sth){
    $scope.fitment = sth.data;
    $scope.isend();//this call is not ideal
});
vehiclesService.getTagsList().then(function(sth){
    $scope.tags = sth.data;
    $scope.isend();//this call is not ideal
});

I want a way to trigger a function only when all 3 variables are initialized. The current method works, but I find it unsatisfactory. I have also attempted

$scope.$watch('vehicles', function() {
   $scope.isend();
});

$scope.$watch('fitment', function() {
   $scope.isend();
});

$scope.$watch('tags', function() {
   $scope.isend();
});

$scope.isend = function(){
    if($scope.vehicles !== undefined && $scope.fitment !== undefined && $scope.tags !== undefined)
        alert('doSomething');
}

It works too, but I consider it even worse!

Is there a better approach to achieving this in Angular?

Answer №1

Utilize the $q.all method - once all promises are fulfilled, the resultant promise is also fulfilled.

$q.all([
    vehiclesService.fetchVehicles(),
    vehiclesService.retrieveFitment(),
    vehiclesService.obtainTagsList()
]).then(function(results) {
   // results variable contains an array
   $scope.complete();
});

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

Tips for adjusting the Material UI Tabs indicator's position with react-scroller

My customized MaterialUI Tabs component stacks all tab content for scrolling using react-scroller. The tabs work smoothly except the indicator does not update its position. The react scroller has props like onSetActive, onSetInactive, and activeClass whic ...

Generate HTML content using AngularJS

Is there a way to format a string as HTML when using it in the following syntax: <div> {{ text }} </div> Instead of displaying the actual HTML, only the text is shown - for example " ab " ...

Loading images in real-time from the server for an HTML gallery

Recently, I implemented a dynamic wowslider gallery that loads images from a specific folder. The issue I encountered is that all the images load simultaneously, causing a delay in loading time. My goal is to load the images one by one in order using JavaS ...

The function you are trying to access does not exist in this.props

Trying to pass this.state.user to props using the isAuthed function is resulting in an error: this.props.isAuthed is not a function . The main objective is to send this.state.user as props to App.js in order to show or hide the Sign out button based on ...

Utilizing Radio buttons for validation in react-hook-form

After creating a form with radio buttons and implementing validation using React Hook Form, I encountered an issue where the console always displayed "on" regardless of the selected radio button. <div className=""> <label ...

Ensure Vue line chart stays current with data passed in as props

Vue 2.x chart-js: 2.x vue-chartjs: 3.x I am currently working on a project where I need to send data from a websocket in my parent component to a child component to create a dynamic line chart that updates in real-time. In my Parent.vue file: <templ ...

JavaScript: Choosing between explicit imports and the * sign

Why do this in one way: import * as copy from 'copy-to-clipboard'; instead of the other way: import { someMethod } from 'copy-to-clipboard'; Does it impact performance or bundle size? Personally, I find the second option cleaner. ...

Using the Mousetrap binding on a nuxt.js page may not be effective

Hey there! I'm trying to achieve a certain functionality where I want to redirect to a different page once a specific sequence is typed. Although I can see the message "It works" in my console, the redirection is not happening and instead, I am gettin ...

Creating an alert pop-up that displays text based on the prompt input type: A step-by-step guide

I'm a new to Javascript and I'm trying out some basic scripts. My objective is to display a prompt message (1.) asking for a name, then show an alert (2.) based on the input from the prompt. If the input is a valid name (a string), then the alert ...

How to make an input blur in Angular 2 when a button is clicked?

Is there a way to blur an input field by pressing the return button on a mobile native keyboard? Here is an example: <input type="text" #search> this.search.blur() //-- unfocus and hide keyboard ...

Organizing Dates in a Kendo Grid: How to Filter and Sort a DateTime Field

I am working with a datetime column in my Kendo Grid that displays values like this: 2014-04-11 12:43:41.720 To simplify the display, I have changed the template to show only short dates: 04/11/2014 The reason for not sending preformatted data to the col ...

Step-by-step guide on uploading a multipart file with AngularJS and Spring MVC

Currently, I am attempting to utilize AngularJS and Spring MVC for file uploading. In my application-context.xml file, I have configured a multipartResolver bean as follows: <mvc:annotation-driven /> <bean id="multipartResolver" ...

Can a React component be customized by injecting props through a script?

There's this web app I use that is built with React and has made some design decisions I'm not a fan of. However, I discovered that changing the design to my liking is actually quite simple - I can just open Chrome React devtools and adjust the ...

Issue with restricting table size in AngularJS not resolving

I need assistance with limiting the size of a table to 5. Here is my current code snippet: <tr ng-repeat="(key,value) in cla|limitTo:5"> <td class="mdl-data-table__cell--non-numeric">{{ key}}</td> <td class="mdl-data-table_ ...

What steps should I follow to make a brief .mp3 audio file play with each keystroke?

I'm in the process of developing a web application with a form, and I want to incorporate a keypress sound effect as a progressive enhancement for better user experience. The sound effect I have chosen is quite short (0.18s). However, when testing m ...

How to assign attributes to all child elements in Angular?

I have a unique component in Angular that I utilize throughout my app. It's a button component which I use by calling <app-delete-btn></app-delete-btn> wherever needed. I tried to set the tabindex="1" attribute for my component ...

Sending Functions as Props in React Using Typescript from a Parent Component to a Child Component

Trying to pass props from Parent to Child using TypeScript-React but getting an error: "Type 'void' is not assignable to type 'Function'." Parent import React from "react"; import Navbar from "./navbar"; import Main from "./main"; f ...

Unexpected issue on AngularJS application

Encountering issues with incorporating a controller into my page - each time I add it to a DOM element, an error is thrown. Here's the structure of my HTML page: <html data-ng-app="sportsStore"> <head> <title>Sports Sto ...

Reposition buttons using JavaScript

I attempted to modify the button that appears at the top of an HTML page. <div class='play'> <input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" /> </div> <div class='pause ...

Tips for consistently utilizing a 'set-method' to modify the attributes of an object employed as ng-model

In my controller, I initialize: $scope.foo = new Foo('test'); // foo.property is now 'test' Then in the view, I have: <input type="text" ng-model="foo.property" /> However, I prefer not to directly change foo.property. I woul ...