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

Chaining Assignments in TypeScript

TS: How can we determine the type of the returned object based on the argument property?

The VueJS Hello world application is experiencing technical difficulties and is currently not functioning as

Issue with the close button on ngb-alert not functioning properly

After redirection to a new page, the Ionic-vue menu malfunctioned

Interactive calendar feature displaying events upon hovering over a date

Formatting UTC time in Angular for display

What could be the reason for the React component not re-rendering even after its prop has been updated?

Error message appears when attempting to submit a form with empty values in NodeJs

The synergy of Redux with scheduled tasks

Automated Desk: adjust page through programming

Is there a way to search for multiple items using just one search term?

Updating NPM packages versions is currently restricted

Issues with JQuery script causing inconsistency in checking checkboxes

The AngularJS directive within a directive is failing to properly initialize the scope value

Express.js is still displaying the 'Not Found' message even after deleting the initial code

Tips on adjusting the pixel dimensions of an image using a file object

Dealing with a jQuery/Javascript/AJAX response: sending a string instead of an integer as a parameter to a

Controlling the file selection window of a browser with protractor/jasmine

reverting the effects of a javascript animation