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