指令不更新我的作用域

Question

在执行异步请求时，我在应用程序周围使用了一个作用域来显示微调器。

作用域是：$scope.showSpinner = true / false

现在我正在编写一个指令，代码是这样的：

'use strict';

angular.module('orders').directive('resetOrder', ['$rootScope', function ($rootScope) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var order_id = attrs.resetOrder;
      element.bind('click', function (event) {
        event.stopPropagation();
        alertify.confirm(
          'Warning!',
          'Are you sure you wish to RESET order id: ' + order_id + '?',
          function () {
            scope.showSpinner = true;
            [ ... ]
          }, function () {
            return;
          }
        );
      });
    }
  };
}]);

scope.showSpinner没有被传播，按下重置按钮后，我看不到微调器处于活动状态。

到目前为止，我尝试了以下内容：

我将$scope转换为$rootScope，而不是工作。我添加了scope.$apply()，甚至添加了$rootScope.$apply()，但没有正常工作。我把它包装在$timeout中，而不是工作。我创建了一个作用域：{ showSpinner：'=‘}，没有工作。

我不能摆脱这个问题。我哪里做错了？

下面是我如何在HTML中添加该指令的：

<button reset-order="{{ order.id }}">

提前感谢您的帮助。

Answer 1

当您在alertify.confirm的回调中时，您处于角度上下文之外，因此对作用域属性的任何更改都不会被反映出来。

尝试：

scope.$apply(function () {
  scope.showSpinner = true;
});

Answer 2

这可能是因为你的指令有一个致命的缺陷。在给定的作用域内只能使用一次。为了重用您的指令，每次都需要创建一个不同的控制器。这显然不是一个很好的解决方案。

您希望能够做的是将指令内部的作用域与外部的作用域分开，然后将外部作用域映射到指令的内部作用域。您可以通过创建我们所称的隔离作用域来做到这一点。为此，您可以使用指令的作用域选项。

https://docs.angularjs.org/guide/directive

隔离作用域之后，将watcher添加到您的指令中以监视更改。示例：

scope.$watch('showSpinner', function (newValue, oldValue) {
    if (newValue == oldValue) {
        return;
    }
    //do something
});