Question

我一直在学习如何使用angularjs中的指令来使用教程here和here来包含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

请看一下

或

检查以下网址

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

我应该如何使用我在angularjs $ watch（）函数中观察的变量

1 个答案: