装饰 Angular 的 $log 以使用使用 $http 的服务

Question

我正在尝试扩展 $log 服务，以便它也可以向服务器发送消息。我从 Angular “ 发现循环依赖项 ” 收到错误消息，因为 $http 使用 $log.

app.js:

angular.module("app").config(function($provide) {
    $provide.decorator("$log", function($delegate, NodeLogger) {
        var logFn = $delegate.log;
        $delegate.log = function(message) {
            NodeLogger.log(message);
            logFn.apply(null, arguments);
        };
    });
});

NodeLogger.js:

angular.module("app").factory("NodeLogger", function($http) {

    function log(type, message) {
        var logMessage = type + ":" + message;
        $http.post("http://localhost:3000/log", "message=" + logMessage);
    }

    return {
        log: log
    }
});

我曾尝试在 app.js 中使用 $injector 来加载 $http 并仅发出 POST 请求，但它给出了相同的错误。有办法解决这个问题吗？我可以避免使用 $http / $resource 吗？

谢谢！

Answer 1

这是循环依赖的一个常见问题，当 $http 已经注入 $log 并通过注入你的工厂 NodeLogger 来装饰它，它又注入你正在创建的 $http循环依赖。除了注入你的工厂直接从注入器获取工厂，另一种方法是在你的工厂注入 $injector 并从注入器获取 $http 实例而不是直接注入 $http 。这样您就可以避免在工厂创建期间出现循环依赖。一个重要的注意事项是 return $delegate 否则 $log 服务将无法容纳任何实例。

$provide.decorator("$log", function($delegate, $injector) {
    var logFn = $delegate.log;
    $delegate.log = function(message) {

      //Get NodeLogger factory instance from injector
      var NodeLogger = $injector.get('NodeLogger');
      NodeLogger.log(message);
      logFn.apply(null, arguments);
    };
    //Return the delegate
    return $delegate;
  });

angular.module("app", []).factory("NodeLogger", function($http) {

  function log(type, message) {
    var logMessage = type + ":" + message;
    $http.post("http://localhost:3000/log", "message=" + logMessage);
  }

  return {
    log: log
  }
}).config(function($provide) {
  $provide.decorator("$log", function($delegate, $injector) {
    var logFn = $delegate.log;
    $delegate.log = function(message) {
      var NodeLogger = $injector.get('NodeLogger');
      NodeLogger.log(message);
      logFn.apply(null, arguments);
    };
    return $delegate;
  });
}).run(function($log) {
  $log.log("Hey");
});;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="app"></div>

装饰 Angular 的 $log 以使用使用 $http 的服务

Decorate Angular's $log to use a service that uses $http

logging

http

decorator

angularjs