Не удалось ввести службу в контроллер

Я сделал это, когда служба и контроллер находятся в одном файле (обычно app.js), и он работает без каких-либо проблем.Не удалось ввести службу в контроллер

Теперь у меня есть контроллеры и службы, которые организованы в разные файлы и соответствующие папки. Мне нужно ввести 1 конкретный сервис в контроллер, но я столкнулся с ошибкой.

Это простое угловое приложение, над которым я работаю, чтобы управлять любимыми видео YouTube. Я получаю сообщение об ошибке на странице add. Просто нажмите кнопку «Добавить», чтобы увидеть ошибку.

Equivalent Plunker

Вот то, что я до сих пор:

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

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

Service - 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; 

      }; 

     } 
    ]);

View - 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>

Здесь ошибка, что я получаю :

Удостоверьтесь, что я не правильно заказываю обслуживание.

Я попытался добавить службу в зависимость от модуля приложения, как показано ниже, но все же выдал ошибку.

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

Как исправить это?

источник

2016-01-27 Rahul Desai

В вашем addService, это изменить:

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

к этому:

angular.module('youtube-favorites')

Вы эффективно создать новый модуль с таким же именем, когда вы включаете пустую [].

Кроме того, вы должны быть переходящими в $rootScope к вашим услугам, потому что $scopeдоступен только к контроллерам.

источник

2016-01-27 19:19:50 lintmouse

Это по-прежнему дает мне эту ошибку. Пожалуйста, см. Мой Plunker: http://plnkr.co/edit/ymoLgiNISsHdDxLBlHYX?p=preview –

@RahulDesai - см. Обновление моего ответа. – lintmouse

Он работал после того, как я передал '$ rootScope' вместо' $ scope'. Но я вообще не использую '$ rootScope' в сервисе. Означает ли это, что служба привязана к '$ rootScope'? –

Вы не можете вводить $ scope в сервис. Вы можете ввести $ rootScope, но $ scope - это вещь, которая вводится на уровне контроллера.

Посмотрите на this stack post для получения более подробной информации.

источник

2016-01-27 19:32:53 bri

Спасибо, что указали это! –

Не удалось ввести службу в контроллер

ответ

Смежные вопросы