1

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

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

以下是我的代码：

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>

4

2 回答 2

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

然后，在factorymehtod 中访问它，例如：

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

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

于 2017-05-16T10:37:21.557 回答
0

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

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

至

app.controller('myNgController', function ($scope,calendarSer) {
    calendarSer.displayCalendar();
});
于 2017-05-16T10:00:56.613 回答