尝试将 ui-calendar 注入我的控制器时出现 $injector:unpr 错误

Question

我正在尝试在我的项目中使用 ui-calendar。日历将根据数据库页面中的数据库值具有不同的视图。因为我必须多次调用日历函数，所以我想我会把代码放在工厂服务中，并根据需要在不同的控制器中调用它。但是当我尝试这样做时，控制台给出：

angular.js:12520 Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=calendarSerProvider%20%3C-alendarSer%20%3C-%20myNgController" error.

以下是我的代码：

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController', ['$scope','calendarSer', function ($scope,calendarSer) {

    calendarSer.displayCalendar();


  }]);


  app.factory('calendarSer', ['$scope', '$http','$rootScope', 'uiCalendarConfig', function ($scope, $http,$rootScope, uiCalendarConfig) {

    return{
    displayCalendar : function(){
    $calendar = $('[ui-calendar]');

    var date = new Date(),
      d = date.getDate(),
      m = date.getMonth(),
      y = date.getFullYear();

    $scope.changeView = function(view){      
       $calendar.fullCalendar('changeView',view);
    };

    /* config object */
    $scope.uiConfig = {
      calendar: {
        lang: 'da',
        height: 450,
        editable: false,
        selectable: true,


        header: {
          left: 'month basicWeek basicDay',
          center: 'title',
          right: 'today prev,next'
        },
        eventClick: function(date, jsEvent, view) {
          $scope.alertMessage = (date.title + ' was clicked ');
          alert("clicked"+date.title);
        },
        select: function(start, end, allDay)
        {

            var obj = {};
            obj.startAt = start.toDate();


            obj.startAt=new Date(obj.startAt).toUTCString();
            obj.startAt=obj.startAt.split(' ').slice(0, 4).join(' ');

            obj.endAt = end.toDate();
            obj.endAt=new Date(obj.endAt).toUTCString();
            obj.endAt=obj.endAt.split(' ').slice(0, 4).join(' ');

            $rootScope.selectionDate = obj;

            $("#modal1").openModal();

            calendar.fullCalendar('unselect');
        },

        eventRender: $scope.eventRender
      }
    };

    $scope.events=[];
    $scope.eventSources = [$scope.events];
    $http.get("rest/my/list", {
        cache: true,
        params: {}
    }).then(function (data) {
        $scope.events.slice(0, $scope.events.length);
        angular.forEach(data.data, function (value) {
            console.log(value.title);
            $scope.events.push({

                title: value.title,
                description: value.description,
                start: value.startAt,
                end: value.endAt,
                allDay : value.isFull,
                stick: true
            });
        });
    });

    }}

  }]);

更新：当我使用

app.controller('myNgController', function ($scope,calendarSer)  {

 calendarSer.displayCalendar();

    
  });

the error changed to "angular.js:12520 Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=<div ng-include="'html/DisplayCalander.html'" class="ng-scope">copeProvider%20%3C-%20%24scope%20%3C-%calendarSer"


This is the html where i am including the html file 

<!-- begin snippet: js hide: false console: true babel: false -->

<div ng-include="'html/CalendarAndCards.html'"></div>

和我实际的 html 日历

<div class="container" style="margin-top: 25px;">
         <div class="row">
            <div class="col s9 offset-s1">
               <div class="card-panel">
                  <div class="card-content">
                     <div ng-include="'html/DisplayCalander.html'"></div>
                  </div>
               </div>
            </div>
            <div class="col s2">
          
            
            </div>
         </div>
      </div>

Answer 1

您可以通过更改此语法进行检查

app.controller('myNgController', ['$scope','calendarSer', function ($scope,calendarSer) {
    calendarSer.displayCalendar();
}]);

至

app.controller('myNgController', function ($scope,calendarSer) {
    calendarSer.displayCalendar();
});

Answer 2

你不应该在 factory, service, providers 中使用 $scope。

所以从工厂声明中删除它。

改变这个：

app.factory('calendarSer', ['$scope', '$http','$rootScope', 'uiCalendarConfig', function ($scope, $http,$rootScope, uiCalendarConfig) {...\

更改为：

app.factory('calendarSer', ['$http','$rootScope', 'uiCalendarConfig', function ($http,$rootScope, uiCalendarConfig) {...\

现在，如果您需要访问 factory 中的 $scope 数据，只需将其从您的控制器传递给工厂方法即可。喜欢：

app.controller('myNgController', ['$scope','calendarSer', function ($scope,calendarSer) {
    calendarSer.displayCalendar($scope);
}]);

然后，在 factory 方法中访问它，例如：

displayCalendar : function(scope){..\use scope inside method

进一步：在您的 html 中加载所有 js lib，并在最后加载 controller and service js。

尝试将 ui-calendar 注入我的控制器时出现 $injector:unpr 错误

$injector:unpr error when trying to inject ui-calendar to my controller

fullcalendar

angularjs

ui-calendar