Deliver an assured result to a variable within the angular.extend() function

Question

Deliver an assured result to a variable within the angular.extend() function

Can someone provide guidance on how to set myVar to a value returned from an asynchronous service method in the following example?

angular.extend(this, {
    myVar: (function() {
        getVal();
    })()
});

function getVal() {
    var d = $q.defer();
    MyFactory.Get()
        .then(function (resp) {
            d.resolve(resp.data);
        });
    return d.promise; // myVar should equal resp.data
};

I feel like I may be struggling with understanding promises/deferral, so any advice would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

If myVar is a variable, you have the flexibility to set it from any part of the controller. During initialization, you can assign it a default value or leave it undefined. You can also update its value after an asynchronous call succeeds.

angular.extend(vm, {
    myVar: 'fallback'
});

Alternatively:

angular.extend(vm, {
});

Then, in the controller:

getVar();
function getVar() {
    getVal().then(function(data){
        vm.myVar = data;
    });
}

function getVal() {
    var d = $q.defer();
    MyFactory.Get()
        .then(function (resp) {
            d.resolve(resp.data);
        });
    return d.promise; // myVar should equal resp.data
};

Or more succinctly:

getVal();

function getVal() {
    MyFactory.Get()
        .then(function (resp) {
            vm.myVar = resp.data;
        });
};

Changed this to vm to avoid potential conflicts with the this keyword.

Answer 2

If myVar is a variable, you have the flexibility to set it from any part of the controller. During initialization, you can assign it a default value or leave it undefined. You can also update its value after an asynchronous call succeeds.

angular.extend(vm, {
    myVar: 'fallback'
});

Alternatively:

angular.extend(vm, {
});

Then, in the controller:

getVar();
function getVar() {
    getVal().then(function(data){
        vm.myVar = data;
    });
}

function getVal() {
    var d = $q.defer();
    MyFactory.Get()
        .then(function (resp) {
            d.resolve(resp.data);
        });
    return d.promise; // myVar should equal resp.data
};

Or more succinctly:

getVal();

function getVal() {
    MyFactory.Get()
        .then(function (resp) {
            vm.myVar = resp.data;
        });
};

Changed this to vm to avoid potential conflicts with the this keyword.

Deliver an assured result to a variable within the angular.extend() function

Answer №1

Similar questions

Error in Nuxt build due to missing core-js dependencies in ./node_modules/bootstrap-vue/:variouspath

Tips for structuring commands in Discord.js

Issue encountered: Unable to locate the file "SignInScreen" within the directory "./src/screens/authScreens" as referenced in the file "App.js"

How can data be shared across different JavaScript functions?

Integrate JavaScript into your HTML code

Adding query parameters dynamically in Vue without refreshing the component

Extracting information from a hyperlink without the need to actually click on it

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

What is the mechanism by which a custom hook, functioning as a trigger, initiates the re-rendering of a separate function component?

Leverage JavaScript E4X to cleverly rename specific XML elements

Is it necessary for TypeScript classes that are intended for use by other classes to be explicitly exported and imported?

Error encountered in MVC 5: When using jQuery to assign a value to an object, the

Is it possible for two overlapping Javascript divs to both be draggable at the same time?

I specialize in optimizing blog content by omitting the final line within a React framework

Connecting Two Checkbox Arrays with JavaScript: A Step-By-Step Guide

Obtaining NodeJS from a mysterious subdirectory

Tips for maintaining the position of a camera in three.js while also keeping its rotation fixed on the origin

This page is overwhelmed with an excessive number of active WebGL contexts, resulting in the inevitable loss of the oldest context. Brace yourselves, for the veteran context shall

What is causing the bullets for the unordered list to appear before the items are inserted into the list?

The infinite loop issue arises when the useEffect is utilizing the useNavigate hook