如何将变量传递给 Angular UI Bootstrap Datepicker 自定义类

问题描述

我正在尝试将双向数据绑定变量传递给 Angular-UI-Bootstrap Datepicker customClass.但是数据绑定在我的 customClass 函数中不起作用，它只是给了我初始化 chosenUser 变量的值.

示例:

1. 我加载了网站，然后使用 chosenUser 中初始化的数据调用了 getDayClass(在本例中未定义)
2. 我从站点中选择了一个用户，双向数据绑定在其他任何地方都能正常工作，但在 getDayClass 函数中
3. 所以在 getDayClass 中 chosenUser 仍然显示为 undefined，即使它不是

因此，在第一次加载 getDayClass 之后对变量所做的任何更改都不会在该函数内部传递.我就是不明白为什么它在那里不起作用.

这是我的角度控制器代码的精简版:

function CalendarController() {var vm = 这个；//这是我试图传递给 getDayClass 的变量(用户对象)vm.chosenUser = {};//选项传递给引导程序日期选择器vm.options = {自定义类:getDayClass};//这是我使用 NG-click 从 HTML 运行并执行的功能//FUNCTION getDayClass(除其他外)vm.refresh = 函数(){$("#calendar").data("$uibDatepickerController").refreshView();}函数 getDayClass(data) {var date = data.date,模式=数据.模式；//返回未定义(仅在此函数内)//即使在用户被选择之后控制台日志(vm.chosenUser)；...};}

解决方案

您可以尝试将 'chosenUser' 存储到数组中，而不是使用普通的 javascript 对象表示法.类似的东西:

function CalendarController() {var vm = 这个；//这是我试图传递给 getDayClass 的变量vm.chosenUser = ["UserNameWillBeHere"];//选项传递给引导程序日期选择器vm.options = {自定义类:getDayClass};//这是我使用 NG-click 从 HTML 运行并执行的功能//FUNCTION getDayClass(除其他外)vm.refresh = 函数(){$("#calendar").data("$uibDatepickerController").refreshView();}函数 getDayClass(data) {var date = data.date,模式=数据.模式；//返回未定义(仅在此函数内)//即使在用户被选择之后console.log(vm.chosenUser[0]);...};}

I'm trying to pass a two-way data binded variable to Angular-UI-Bootstrap Datepicker customClass. But the data binding doesn't work inside my customClass function, it just gives me the value I initialized chosenUser variable with.

Example:

So any changes made to variables after the first load of getDayClass don't get passed inside that function. I just can't understand why it doesn't work in there.

Here is a stripped version of my angular controller code:

function CalendarController() {
   var vm = this;

   //THIS IS THE VARIABLE (USER OBJECT) I'M TRYING TO PASS TO getDayClass
   vm.chosenUser = {};

   //OPTIONS PASSED TO BOOTSTRAP DATEPICKER
   vm.options = {
        customClass: getDayClass
   };

   //THIS IS THE FUNCTION I RUN FROM HTML WITH NG-CLICK AND IT EXECUTES
   //FUNCTION getDayClass (AMONG OTHER THINGS)
   vm.refresh = function() {
      $("#calendar").data("$uibDatepickerController").refreshView();
   }

   function getDayClass(data) {
       var date = data.date,
       mode = data.mode;

      //RETURNS UNDEFINED (ONLY INSIDE THIS FUNCTION)
      //EVEN AFTER USER HAS BEEN CHOSEN
      console.log(vm.chosenUser);
       ...
   };
}

解决方案

You could try to store 'chosenUser' into an array instead of using plain javascript object notation. Something like:

function CalendarController() {
       var vm = this;

       //THIS IS THE VARIABLE I'M TRYING TO PASS TO getDayClass
       vm.chosenUser = ["UserNameWillBeHere"];

       //OPTIONS PASSED TO BOOTSTRAP DATEPICKER
       vm.options = {
            customClass: getDayClass
       };

       //THIS IS THE FUNCTION I RUN FROM HTML WITH NG-CLICK AND IT EXECUTES
       //FUNCTION getDayClass (AMONG OTHER THINGS)
       vm.refresh = function() {
          $("#calendar").data("$uibDatepickerController").refreshView();
       }

       function getDayClass(data) {
           var date = data.date,
           mode = data.mode;

          //RETURNS UNDEFINED (ONLY INSIDE THIS FUNCTION)
          //EVEN AFTER USER HAS BEEN CHOSEN
          console.log(vm.chosenUser[0]);
           ...
       };
    }

这篇关于如何将变量传递给 Angular UI Bootstrap Datepicker 自定义类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！