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

在isoleting范围之后，在您的指令中添加观察程序以监视更改。例如：

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

指令不会更新我的范围

2 个答案: