1

この素敵な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);
    }
}
}]);
4

0 に答える 0