この素敵なLumxライブラリをAngularアプリの一部として使用し、datepickerを使用しようとしています: http://ui.lumapps.com/components/date-picker
lumx ファイルを含めて、アプリに適したスタイルのボタンが表示されますが、[日付ピッカーを開く] ボタンをクリックすると発生します。js エラーもないので、「vm」オブジェクトが正しく初期化されていないように見えますか? {{ vm.datePicker.basic.dateFormatted }} たとえば、何も表示されないため、初期化/スコープの問題のようです。
起動して実行するために、例のように HTML を使用しました。
<div class="p+">
{{ vm.datePicker.basic.dateFormatted }}
<div class="mt">
<lx-button ng-click="vm.openDatePicker(vm.datePickerId)">Open date picker</lx-button>
</div>
<lx-date-picker id="{{ vm.datePickerId }}"
ng-model="vm.datePicker.basic.date"
lx-callback="vm.datePickerCallback(newDate)"
lx-locale="{{ vm.locale }}"
lx-max-date="vm.datePicker.basic.maxDate"
lx-min-date="vm.datePicker.basic.minDate"></lx-date-picker>
</div>
視覚的には、ボタンは例のように表示されます。
次に、次の .js を controllers.js ファイルに追加しました。これも、管理できる限り例に近いものです。alert("a"); として初期化されていることはわかっています。アプリのロード時にポップアップします。これ以上のものを動作させることはできません。つまり、ボタンをクリックすると、日付ピッカーが表示されます。
私は正しく初期化していないことを知っていますが、誰かが私がここで間違っていることを見ることができますか? たとえば、 alert("b") が呼び出されることはありません。どんな助けでも素晴らしいでしょう!?
:
myfirstControllers.controller('pageController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$http.get('js/data.json').success(function (data) {
$scope.profiles = data;
$scope.whichItem = $routeParams.itemId;
});
pageController.$inject = ['LxDatePickerService'];
alert("a");
function pageController(LxDatePickerService) {
alert("b");
var vm = this;
vm.datePickerCallback = datePickerCallback;
vm.openDatePicker = openDatePicker;
vm.locale = 'en';
vm.datePicker = {
basic: {
date: new Date()
, dateFormatted: moment().locale(vm.locale).format('LL')
, minDate: new Date(new Date().getFullYear(), new Date().getMonth() - 2, new Date().getDate())
, maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate())
}
, input: {
date: new Date()
, dateFormatted: moment().locale(vm.locale).format('LL')
}
};
vm.datePickerId = 'date-picker';
////////////
function datePickerCallback(_newdate) {
alert("b");
vm.datePicker.basic.date = _newdate;
vm.datePicker.basic.dateFormatted = moment(_newdate).locale(vm.locale).format('LL');
}
function openDatePicker(_pickerId) {
alert("c");
LxDatePickerService.open(_pickerId);
}
}
}]);