Wait for the response from another component in angular js

Question

I have a created a component called popupmessage to show custom message with "ok" and "cancel" button. This i am invoking from another component say component "a" using $compile like below.

a.js has the below code to invoke popupmessagebox:

var dialogBox = $compile('<pop-up-message id="messagebox" message="' + response.data + '" okbutton="' + "true" + '"cancelbutton="' + "false"'"></pop-up-message>')($scope);
$('.data-table').append(dialogBox);

After this i want to reload component "a" on clicking of OK button in popupmessage component. How do i do this? Reloading of component "a" can be achieved by adding window.location.reload() after the above lines. but it does not wait until i click "OK" in popupmessage component.

I want to call reload in "a" component after clicking of button "ok" in popupmessage component. How to achieve this?

Answer 1

I'm not sure how pop-up-message directive looks like but I guess it's somehow similar to the code below.

Anyway, directive can receive data from whom call it via its attribute, but you already know this because you pass the message for example, to the directive.

Directive can receive also functions. So you declare the function in the controller / component, pass it via the attributes, and then you can call it in the directive.

Even if your controller / directive are not looking the same as the example ^[1], you probably can get the idea of how to implement it.

angular
  .module('app', [])
  .controller('ctrl', function($scope, $compile) {
    $scope.show = function() {
      // fake response
      const response = {
        data: 'my data'
      }
      $scope.modalCallback = function() {
        console.log('callback fired');
        // window.location.reload() <-- now you can call it
      }

      var dialogBox = $compile('<pop-up-message id="messagebox" message="' + response.data + '" okbutton="true" cancelbutton="false" callback="modalCallback()"></pop-up-message>')($scope);
$('.data-table').append(dialogBox);
    }
  })
  .directive('popUpMessage', function() {
    return {
      scope: {
        message: '@',
        callback: '&'
      },
      template: `
        <div>
          {{message}}
          <button ng-click="callback()">Ok</button>
        </div>
      `
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <button ng-click="show()">show modal</button>
</div>

<div class="data-table"></div>

---

^[1] In the example I used isolated scope. If your directive is not using it, you should declare the callback function on the scope you're passing the directive and it should work the same.