Resolving a previously rejected promise

Question

I know that the state of a promise is immutable, so once it is resolved/rejected, it stays at the state. But imagine the following scenario:

I am creating a scheduling application. You go on a given day, and make a request to the API to get the schedule. A promise is created while the API call is in progress. If a schedule is found, then the promise is resolved, and you see the schedule. If no schedule is found the promise is rejected and you see a message say "No schedule found. Please create one first".

The markup of how these two messages show up is as follows:

<!-- The promise is passed to the wrapping div -->
<!-- While API is in progress, the loader directive will show an ajax loading icon -->
<!-- and will hide the content -->
<div loader="loader.promise" loader-channel="some-channel">

    <!-- If loader is resolved, the the loader-success shows up -->
    <div loader-success="some-channel">

    <!-- If loader is rejected, the the loader-failure shows up -->
    <div loader-failure="some-channel">

Now, I create a schedule, and want to show the newly created schedule without reloading the page. I need to resolve the previous promise as this promise controls the different parts of markup.

What can I do?

Edit

I know that I could use the promise internally in my controller, and have a variable called scope.noSchedule that is set to true or false.

However, I created the loader directive so that I could easily add that directive to any component in my application. This way, all loaders of each component look the same, and also I don't need to reimplement it everytime I start a new component.

Answer 1

Don't access the promise directly in your markup, use it to set a variable or two in the scope and use those in the in markup. Then you can have a method in your controller to call a new promise and rebind the markup. Something like this...

var aPromise = scheduleService.getSchedule();

aPromise.then(
    function (data) { $scope.Schedule = data; },
    function () { $scope.scheduleError = true; });


$scope.tryAgain = function() {
    aPromise = scheduleService.getSchedule();
};