Question

我最初在经过一些调查后发现了错误Argument 'fn' is not a function got string并在Argument 'fn' is not a function got string后偶然发现了错误：[$ injector：cdep]发现了循环依赖：sessionService＆lt; - sessionService 。

我使用的AngularJS版本是1.6.6。谢谢你的帮助！

HTML

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Services and Factories</title>
    <script src="angular.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
</head>
<body ng-controller="sessionController as vm">
<div class="container">
    <h1>Services and Factories</h1>

    <div class="form-group-row">
        <div class="col-sm-4">
            <label>Name</label>
        </div>

        <div class="col-sm-8">
            <input type="text" class="form-control" ng-model="vm.model.name">
        </div>
    </div>

    <div class="form-group-row">
        <div class="col-sm-4">
            <label>Nick Name</label>
        </div>

        <div class="col-sm-8">
            <input type="text" class="form-control" ng-model="vm.model.nickname">
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-8 col-sm-offset-4">
            <input type="button" class="btn btn-primary" ng-click="vm.setServiceSession()" value="Save with Service">

            <input type="button" class="btn btn-default" ng-click="vm.getServiceSession()" value="Retrieve from Service">


            <input type="button" class="btn btn-default" ng-click="vm.clearServiceSession()" value="Clear from Service">

        </div>
    </div>
<pre>{{vm.model | json}}</pre>
</div>

<script src="app/app.js"></script>
<script src="app/sessionService.js"></script>
<script src="app/sessionController.js"></script>

</body>
</html>

app.js

var app = angular.module('app',[]);

sessionController.js

angular.module('app').controller('sessionController',['sessionService',

    function (sessionService) {

    var vm = this;


    function sessionController(sessionService) {

        var vm = this;

        vm.getServiceSession = function () {

            vm.model = {
                name: sessionService.get('name'),
                nickname: sessionService.get('nickname'),
                status: 'Retrieved by service on ' + new Date()
            }
        };

        vm.setServiceSession = function () {

            sessionService.save('name', vm.model.name);
            sessionService.save('nickname', vm.model.nickname);
            vm.getServiceSession();
        };

        vm.clearServiceSession = function () {

            sessionService.clear();
            vm.getServiceSession();
        }

    }
}

]);

sessionService.js

angular.module('app').service('sessionService',['$window','sessionService',
function sessionService($window) {

    this.save = save;
    this.get = get;
    this.clear = clear;

    function save(key, value) {
        $window.sessionStorage.setItem(key,value);

    }

    function get(key) {
        return $window.sessionStorage.getItem(key);
    }

    function clear() {
        $window.sessionStorage.clear();
    }

}]);

Answer 1

在sessionService.js中：

您告诉Angular注册（创建）名为sessionService的服务，该服务有两个依赖关系 - $window和sessionService。这是循环依赖，因为sessionService不能依赖于它自己。

要避免循环依赖，您需要从依赖项列表中删除'sessionService'。

angular.module('app').service('sessionService',['$window', 
function sessionService($window) {

    this.save = save;
    this.get = get;
    this.clear = clear;

    function save(key, value) {
        $window.sessionStorage.setItem(key,value);

    }

    function get(key) {
        return $window.sessionStorage.getItem(key);
    }

    function clear() {
        $window.sessionStorage.clear();
    }
}]);

我认为您错误地完成了这项工作，但阅读Angular服务的文档可能有所帮助：

https://docs.angularjs.org/guide/services#dependencies

Angular JS错误：[$ injector：cdep]找到循环依赖项：sessionService＆lt; - sessionService

1 个答案:

在sessionService.js中：