Question

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

angular.js：12520错误：[$ injector：unpr] http://errors.angularjs.org/1.4.8/ $ injector / unpr？p0 = calendarSerProvider％20％3C-alendarSer％20％3C-％20myNgController＆＃34;错误。

以下是我的代码：

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

    }}

  }]);

更新：我用的时候

＆＃13;

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

＆＃13;

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

＆＃13;

和我的日历实际html

＆＃13;

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

＆＃13;

Answer 1

您不应在$scope内使用factory, service, providers。

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

改变这一点：

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

更改为：

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

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

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

然后，在factory mehtod中访问它，如：

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

此外：在您的HTML中加载所有js lib并在结尾加载controller and service js。

Answer 2

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

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

到

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

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

2 个答案: