0

ここここのチュートリアルを使用して、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>
4

1 に答える 1

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;
  });
});
于 2013-08-19T11:49:32.007 に答える