我应该如何使用我在 angularjs $watch() 函数中观看的变量

Question

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

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

这是我当前的方向性.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>

Answer 1

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

请看

或

检查以下URL

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

检查以上url的控制器部分：

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