如何将变量传递给 Angular UI Bootstrap Datepicker 自定义类 [英] How to pass variable to Angular UI Bootstrap Datepicker custom class

问题描述

我正在尝试将双向数据绑定变量传递给 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:

1. I load the site and getDayClass gets called with data initialized in chosenUser (undefined in this case)
2. I choose an user from the site and the two-way data bind works correctly everywhere else but in getDayClass function
3. So in getDayClass chosenUser is still displayed as undefined, even though it isn't

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 自定义类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！