Question

当服务和控制器位于单个文件中时（通常是app.js），我已经完成了这项工作，并且它没有任何问题。

现在，我将控制器和服务组织在不同的文件和相应的文件夹中。我需要在控制器中注入1个特定服务，但我遇到了错误。

这是一个我正在处理的简单角度应用，可以管理您最喜欢的YouTube视频。我在add页面上收到错误。只需单击“添加”按钮即可查看错误。

这是我到目前为止所做的：

的index.html

<!doctype html>
<html ng-app="youtube-favorites">
    <head>
        <title>My YouTube Favorites</title>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12" style="border: 1px solid red;">
                    <div ui-view></div>
                </div>
            </div>
        </div>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
        <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="app.js"></script>
        <script src="services/add.js"></script>
        <script src="controllers/home.js"></script>
        <script src="controllers/add.js"></script>
    </body>
</html>

app.js

angular.module('youtube-favorites', ['ui.bootstrap', 'ui.router'])
    .config(['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {

            // For any unmatched url, redirect to /home
            $urlRouterProvider.otherwise('/home');

            // Now set up the states
            $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: 'views/home.html',
                    controller: 'homeController'
                })
                .state('add', {
                    url: '/add',
                    templateUrl: 'views/add.html',
                    controller: 'addController'
                });
        }
    ]);

控制器 - add.js

angular.module('youtube-favorites')
    .controller('addController', ['$scope', '$log', 'addService',
        function($scope, $log, addService) {
            $log.info('add');

            $scope.addFavorite = function() {
                addService.addFavorite($scope.title, $scope.youtubeUrl)

                $log.info('title', $scope.title);
                $log.info('youtubeUrl', $scope.youtubeUrl);
            };
        }
    ]);

服务 - add.js

angular.module('youtube-favorites', [])
    .service('addService', ['$scope', '$log', '$q', '$window',

        function($scope, $log, $q, $window) {

            $log.info('add service called');

            this.addFavorite = function(title, url) {

                $log.info('title', title);
                $log.info('url', url);

                $window.localStorage.setItem('youtubeFavorites', angular.toJson({
                    title: title,
                    url: url
                }));

                return true;

            };

        }
    ]);

查看 - add.html

<form name="addForm" ng-submit='addFavorite()' novalidate>
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" name="title" class="form-control" placeholder="Awesome video!" aria-describedby="title" ng-model="title" required />
        <!-- <p ng-show="addForm.title.$error.required" class="help-block">Please enter the title.</p> -->
    </div>
    <div class="form-group">
        <label for="youtubeUrl">YouTube <em>embed</em> URL</label>
        <input type="text" name="youtubeUrl" class="form-control" placeholder="https://www.youtube.com/embed/someID" aria-describedby="youtubeUrl" ng-model="youtubeUrl" required />
        <!-- <p ng-show="addForm.youtubeUrl.$error.required" class="help-block">Please enter the URL.</p> -->
    </div>
    <div class="form-group">
        <button class="btn btn-default grey" type="submit">Submit</button>
    </div>
</form>

以下是我收到的错误：

很确定我没有正确地注入服务。

我确实尝试将该服务作为依赖项添加到app模块，如下所示，但仍然出错。

angular.module('youtube-favorites', ['ui.bootstrap', 'ui.router', 'youtube-favorites.addService'])....

我该如何解决这个问题？

Answer 1

在您的addService中，更改此内容：

$eval "$(docker-machine env dev2)"

到此：

angular.module('youtube-favorites', [])

当您包含空angular.module('youtube-favorites')时，您正在有效地创建一个具有相同名称的新模块。

此外，您应该将[]传递给您的服务，因为$rootScope 仅适用于控制器。

Answer 2

您无法将$ scope注入服务。你可以注入$ rootScope，但$ scope是一个在控制器级注入的东西。

详细了解this stack post。

无法在控制器中注入服务

2 个答案: