在angularjs中等待另一个组件的响应

Question

我创建了一个名为 popupmessage 的组件来显示带有 "ok" 和 "cancel" 按钮的自定义消息。这是我从另一个组件调用的组件 "a" 使用 $compile 如下所示。

a.js 具有以下调用弹出消息框的代码：

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

在此之后，我想在单击弹出消息组件中的“确定”按钮时重新加载组件 "a"。我该怎么做呢？组件 "a" 的重新加载可以通过在上述行之后添加 window.location.reload() 来实现。但它不会等到我在弹出消息组件中单击 "OK"。

我想在弹出消息组件中单击按钮 "ok" 后在 "a" 组件中调用重新加载。如何实现？

Answer 1

我不确定 pop-up-message 指令是什么样子，但我猜它与下面的代码有点相似。

无论如何，指令可以通过它的属性接收调用它的人的数据，但你已经知道这一点，因为你将 message 传递给指令。

指令也可以接收函数。所以你在控制器/组件中声明函数，通过属性传递它，然后你可以在指令中调用它。

即使您的控制器/指令与示例 ^[1] 看起来不一样，您也可能知道如何实现它。

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] 在示例中我使用了 isolated scope。如果你的指令没有使用它，你应该在你传递指令的 scope 上声明 callback 函数，它应该工作相同。

在angularjs中等待另一个组件的响应

Wait for the response from another component in angular js

angularjs

angularjs-directive

angularjs-compile