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