Angularjs 角度$watch缩小后不工作

我有一个实现spin.js库的指令。我用它来触发一个微调器，当我转换页面时它会弹出。它监视一个服务函数以知道何时触发微调器。它在开发中运行良好，但当我使用yeoman构建应用程序时，当页面加载时，手表会触发，但不会再次触发。有没有一种不同的方式来编写watcher，使其在缩小时工作？也许我完全错过了其他的东西

var utilities = angular.module('SlUtilities', ['ui.router']);

utilities.directive('spinner', function ($window, spinner) {
  return {
    scope: true,
    link: function (scope, element, attr) {

      var window = angular.element($window);
      scope.spinner = null;

      function stopSpinner() {
        if (scope.spinner) {
          scope.spinner.stop();
          scope.spinner = null;
          element.hide();
        }
      }

      function startSpinner() {
        element.show();
        scope.spinner = new $window.Spinner(angular.fromJson(attr.spinner.replace(/'/g, '\"')));
        scope.spinner.spin(element[0]);
      }

      scope.$watch(spinner.spinning, function (start) {
        console.log(start);
        if (start) {
          startSpinner()
        } else {
          stopSpinner();
        }
      });

      scope.$on('$destroy', function () {
        stopSpinner();
      });

      scope.style = function () {
        var top = window.height() / 2 - 35;
        var left = window.width() / 2 - 35;
        return {
          'top': top + 'px',
          'left': left + 'px'
        };
      }
    }
  };
});

//factory


utilities
  .factory('spinner', function () {

    var spin = false;

    // Public API here
    return {
      start: function () {
        spin = true;
      },
      stop: function () {
        spin = false;
      },
      spinning: function () {
        return spin;
      }
    };
  });

摘录自简化代码：

c.$watch(b.spinning,function(a){console.log(a),a?g():f()})

及

---

感谢您查看。

您应该在引号中传递

$watch variable

：

scope.$watch('spinner.spinning', function (start) {

---

缩小后也会起作用。

您的指令与缩小不兼容

你需要做以下事情，因为手表看起来还可以

utilities.directive('spinner', ['$window', 'spinner', function ($window, spinner) {
  return {
    scope: true,
    link: function (scope, element, attr) {

      var window = angular.element($window);
      scope.spinner = null;

      function stopSpinner() {
        if (scope.spinner) {
          scope.spinner.stop();
          scope.spinner = null;
          element.hide();
        }
      }

      function startSpinner() {
        element.show();
        scope.spinner = new $window.Spinner(angular.fromJson(attr.spinner.replace(/'/g, '\"')));
        scope.spinner.spin(element[0]);
      }

      scope.$watch(spinner.spinning, function (start) {
        console.log(start);
        if (start) {
          startSpinner()
        } else {
          stopSpinner();
        }
      });

      scope.$on('$destroy', function () {
        stopSpinner();
      });

      scope.style = function () {
        var top = window.height() / 2 - 35;
        var left = window.width() / 2 - 35;
        return {
          'top': top + 'px',
          'left': left + 'px'
        };
      }
    }
  };
}]);

utilities.directive('spinner', ['$window', 'spinner', function ($window, spinner) {
  return {
    scope: true,
    link: function (scope, element, attr) {

      var window = angular.element($window);
      scope.spinner = null;

      function stopSpinner() {
        if (scope.spinner) {
          scope.spinner.stop();
          scope.spinner = null;
          element.hide();
        }
      }

      function startSpinner() {
        element.show();
        scope.spinner = new $window.Spinner(angular.fromJson(attr.spinner.replace(/'/g, '\"')));
        scope.spinner.spin(element[0]);
      }

      scope.$watch(spinner.spinning, function (start) {
        console.log(start);
        if (start) {
          startSpinner()
        } else {
          stopSpinner();
        }
      });

      scope.$on('$destroy', function () {
        stopSpinner();
      });

      scope.style = function () {
        var top = window.height() / 2 - 35;
        var left = window.width() / 2 - 35;
        return {
          'top': top + 'px',
          'left': left + 'px'
        };
      }
    }
  };
}]);