0

我一直在学习如何使用 angularjs 中的指令来使用此处和此处的教程来包含 jQuery 插件。我正在尝试合并fullCalendar并且我已经成功地初始化并显示了日历，但现在我有点卡住了。我目前正在从 json 文件中获取数据（最终将来自工厂和 php 获取响应），但我不确定如何在指令中引用 json 数据并需要一些指导。

目前我有以下内容，但是不硬编码并保持灵活性的正确/最佳方法是什么。我知道我可以$http.get()在指令中提出请求，但我觉得我不应该从我的指令中提出任何请求（除非有人可以说服我这种方法不是坏习惯）

这是我当前的directive.js（请不要getJSON（）仅用于测试）

   angular.module('Directives', [])
     .directive('mycalendar', function () {
     getJSON = function () {
         return [{
             "title": "Fitness",
             "start": "2013-08-01 06:30:00",
             "instructor": "3"
         }]
     }

     var linker = function (scope, element, attr) {
         scope.$watch('classesList', function () {
             /**/
             element.fullCalendar({
                 header: {
                     left: 'prev,next today',
                     center: 'title',
                     right: 'month,agendaWeek,agendaDay'
                 },
                 editable: true,
                 events: getJSON()
                 /**/
             });
         });
     }
     return {
         restrict: 'A',
         link: linker
     }
 });

我的控制器：

angular.module('Controllers', [])
    .controller('CalController', function ($scope, $http) {
    $scope.url = 'json/classes.json';
    $scope.classesList = [];

    $scope.fetchClasses = function () {
        $http.get($scope.url)
            .then(function (result) {
            $scope.classesList = result.data;
        });
        $scope.fetchClasses();
    }
});

我的 HTML：

  <div id="container" ng-controller="CalController">
    <div id='calendar' mycalendar></div>
  </div>
4

1 回答 1

1

与 Module @ https://github.com/angular-ui/ui-calendar相同的完整日历可用

请看一下

或者

检查以下网址

http://jsfiddle.net/joshkurz/xqjtw/59/

检查上述网址的控制器部分：

 $scope.eventSource = {
            url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
            className: 'gcal-event',           // an option!
            currentTimezone: 'America/Chicago' // an option!
        };

这里“$scope.eventSource”是静态的，您可以通过创建服务功能使其动态化，并使用 $http 并在控制器中注入服务功能

以下是相同的示例：

app.factory('myService', function($http) {
   return {
     getList:function(params){
          var promise= $http({url: 'ServerURL',method: "POST", params: params}).then(function(response,status){

            return response.data;
            });
          // Return the promise to the controller
          return promise; 
        }
   }
});

app.controller('MainCtrl', function($scope, myService) {
  myService.getList(function(data) {
    $scope.eventSource = data;
  });
});
于 2013-08-19T11:49:32.007 回答