Question

我有一个实现spin.js库的指令。我用它来触发在转换页面时弹出的微调器。它监视服务功能以了解何时触发微调器。它在开发中工作正常，但是当我使用yeoman构建应用程序时，手表会在页面加载时触发，但永远不会再次触发。是否有不同的方式来编写观察者，以便它在缩小时起作用？也许我完全错过了其他的东西......

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()})

和

utilities.factory("spinner",function(){var a=!1;return{start:function(){a=!0},stop:function(){a=!1},spinning:function(){return a}}})

谢谢你看看。

Answer 1

您应该在引号中传递$watch variable：

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

在缩小之后，这也会奏效。

Answer 2

您的指令与缩小版不兼容。

您需要执行以下操作，因为手表似乎没问题

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'
        };
      }
    }
  };
}]);

Angular $ watch在缩小时不起作用

2 个答案: