Update the promise status to reflect any changes

Question

Update the promise status to reflect any changes

While attempting to modify the button text based on the promise status, I created a custom directive for this purpose.

Below is the code snippet for my custom directive:

.directive('myDir',function(){
          return {
            scope: {
              myDir: '&',
              afterValue: '@',
              beforeValue:'@',
              ngDisable:'=',
            },
            link: function ($scope, element, attrs) {
              element[0].innerHTML=$scope.beforeValue;
              element.bind('click',function(){
                console.log(element);

                element[0].innerHTML=$scope.afterValue;
                element[0].className+="disabled";
                element[0].disabled='true'
                $scope.myDir();
                //success i would like to change the status here
              })
            }
          }

        })

Here is the corresponding controller code:

.controller('myCtrl',[function(){
          var vm = this;
          console.log("MYCTRL");
          vm.fun= function(){
            //promise running here
          }
        }])

Furthermore, you can access the working example via this Plnkr link : https://plnkr.co/edit/Qj9GG2?p=templates/

I am currently facing difficulty in capturing the success of the promise in the directive.

javascript angularjs

Answer 1

Answer №1

If you want to retrieve the result of a promise, you can utilize the .then method. In this demonstration, I establish a promise that resolves after 2 seconds. Once resolved, the directive will modify the text displayed on the button.

Creating a promise using $q is showcased below:

  vm.fun= function(){
    // Promise execution here
    return $http.get('www.foo.org');
  }

angular
        .module('myApp',[])
        .directive('myDir',function(){
          return {
            scope: {
              myDir: '&',
              afterValue: '@',
              beforeValue:'@',
              ngDisable:'=',
            },
            link: function ($scope, element, attrs) {
              element[0].innerHTML=$scope.beforeValue;
              element.bind('click',function(){                  
                element[0].innerHTML=$scope.afterValue;
                element[0].className+="disabled";
                element[0].disabled='true'
                $scope.myDir().then(function(){
                  // On success, change status here  
                  // Update status here...
                  console.log('Callback from promise. Everything is fine.');
                  
                  element[0].disabled=false;
                  element[0].innerHTML = $scope.beforeValue;
                }, function(){
                    // Error handling for promise failure
                    console.log('Callback from promise. Something went wrong.');
                });
                
              })
            }
          }
          
        })
        .controller('myCtrl',['$q', function($q){
          var vm = this;
          console.log("MYCTRL");
          vm.fun= function(){
            console.log('method called');
            // Create a promise here...
            var def = $q.defer();
            
            setTimeout(function(){
              console.log('done in controller');
              def.resolve();
              
              // Potential use of reject in case of error.
              // def.reject();
            }, 2000)
            
            return def.promise;
          }
        }])

<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76171811031a1704581c05364758405846">[email protected]</a>" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303706d706d74">[email protected]</a>" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div ng-app="myApp">
  <div ng-controller="myCtrl as $ctrl">
  <button class="btn btn-primary" my-dir="$ctrl.fun()" after-value="Clicked" before-value="click" ng-disabled>Click</button>
  </div>
</div>

Update based on comments:

Upon clicking the button, the text should change, the button should be disabled, and the promise should be invoked by calling a function within the controller and not directly invoking the promise.

When you invoke $scope.myDir(), you are actually triggering a function that returns a promise, not directly invoking the promise itself. Clarify how you mean the promise should be "invoked".

Following the promise's success or failure in the controller, I intend to update the text on the button and enable it accordingly.

This behavior is handled within the .then() function. If the promise returned by myDir() resolves successfully, the status on the button will revert back. This process is implemented within the directive since it has knowledge about the button's state. Both success and error scenarios from the promise are accounted for.

Answer 2

If you want to retrieve the result of a promise, you can utilize the .then method. In this demonstration, I establish a promise that resolves after 2 seconds. Once resolved, the directive will modify the text displayed on the button.

Creating a promise using $q is showcased below:

  vm.fun= function(){
    // Promise execution here
    return $http.get('www.foo.org');
  }

angular
        .module('myApp',[])
        .directive('myDir',function(){
          return {
            scope: {
              myDir: '&',
              afterValue: '@',
              beforeValue:'@',
              ngDisable:'=',
            },
            link: function ($scope, element, attrs) {
              element[0].innerHTML=$scope.beforeValue;
              element.bind('click',function(){                  
                element[0].innerHTML=$scope.afterValue;
                element[0].className+="disabled";
                element[0].disabled='true'
                $scope.myDir().then(function(){
                  // On success, change status here  
                  // Update status here...
                  console.log('Callback from promise. Everything is fine.');
                  
                  element[0].disabled=false;
                  element[0].innerHTML = $scope.beforeValue;
                }, function(){
                    // Error handling for promise failure
                    console.log('Callback from promise. Something went wrong.');
                });
                
              })
            }
          }
          
        })
        .controller('myCtrl',['$q', function($q){
          var vm = this;
          console.log("MYCTRL");
          vm.fun= function(){
            console.log('method called');
            // Create a promise here...
            var def = $q.defer();
            
            setTimeout(function(){
              console.log('done in controller');
              def.resolve();
              
              // Potential use of reject in case of error.
              // def.reject();
            }, 2000)
            
            return def.promise;
          }
        }])

<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76171811031a1704581c05364758405846">[email protected]</a>" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303706d706d74">[email protected]</a>" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div ng-app="myApp">
  <div ng-controller="myCtrl as $ctrl">
  <button class="btn btn-primary" my-dir="$ctrl.fun()" after-value="Clicked" before-value="click" ng-disabled>Click</button>
  </div>
</div>

Update based on comments:

Upon clicking the button, the text should change, the button should be disabled, and the promise should be invoked by calling a function within the controller and not directly invoking the promise.

When you invoke $scope.myDir(), you are actually triggering a function that returns a promise, not directly invoking the promise itself. Clarify how you mean the promise should be "invoked".

Following the promise's success or failure in the controller, I intend to update the text on the button and enable it accordingly.

This behavior is handled within the .then() function. If the promise returned by myDir() resolves successfully, the status on the button will revert back. This process is implemented within the directive since it has knowledge about the button's state. Both success and error scenarios from the promise are accounted for.

Update the promise status to reflect any changes

Answer №1

Similar questions

Differences Between Android and JavaScript: Ensuring Library Validity

Use VB.NET to dynamically update cell content in HTML

JSON object fails to iterate with ng-repeat

SimpleLightBox refuses to function

Divide the division inside the box by clicking on it

Tips for combining values with Reactive Forms

Strange behavior: JS object values disappear when accessed statically

Change the label's class when the input area is selected

Finding and retrieving the checked checkboxes in Selenium WebDriver without using the name or xpath

Creating Vue3 Component Instances Dynamically with a Button Click

Unable to access JQuery Draggable method within partial view

Is it feasible to capture a screenshot of a URL by using html2canvas?

Error in ng-repeat loop: detecting duplicates when none are present

Decoding a JSON object in node.js

Getting the parameter route value from Laravel and passing it to Ajax

Subtracting Arrays Containing Duplicates

Is there a way to dispatch an event from one Angular ui-router view to another view?

Click a button to spin images around

`@keyup.enter event listener will only be triggered upon pressing the Enter key if the focus is on

What is the best way to display three unique maps simultaneously on separate views?