如何更新bootstrap-daterangepicker日期更改上的绑定？

我正在使用this plugin与我的AngularJS应用程序和变量来存储开始日期和结束日期，只要它们发生变化。如何更新bootstrap-daterangepicker日期更改上的绑定？

关于日期范围更改，如何调用控制器方法更新页面上的数据？

就像调用范围的这种方法：

$scope.updateDataOnDateRangeChange = function(){ 
    // here calling few services to fetch new data for the page 
    // for the selected date range 
}

如何使用NG点击或异常变化或定制指令，这个插件？

来源

2013-10-26 forsimb

在AngularJS中有一个ngChange directive，它应该完成你所描述的任务。

将此指令添加到您的日期范围输入元素中。

来源

2013-10-26 20:48:31

不可能触发，因为当使用脚本更改值时，浏览器无法识别更改事件 – charlietfl

使用jQuery插件的基本过程通常是为它创建一个指令。回调函数link内部初始化插件。在这里你可以访问元素作为jQuery或jQ-lite对象，角度范围和插件回调。请参阅有关第三方代码中进行更改范围时uing $.apply()重要意见

样本HTML：

<input my-picker type="text"/>

Basic脚本大纲：

app.directive('myPicker', function ($timeout) { 
    return { 
     link: function (scope, elem, attrs) { 
      $timeout(function() { 
       /* elem is a jQuery or jQ-lite object representing the element*/ 
       elem.daterangepicker({ 
        format: 'YYYY-MM-DD', 
        startDate: '2013-01-01', 
        endDate: '2013-12-31' 
       }, 
       /* not overly familiar with this plugin but this callback 
       should allow you to set angular scopes */ 
       function (start, end) { 
        /* important to do any scope changes within `$.apply()` so angular 
         becomes aware of changes from third party code*/ 
        scope.$apply(function(){ 
         /* do what you need here with angular scope 
         have access to plugin data as well as angular scope*/ 

        }) 
       }); 
      }, 1) 
     } 
    } 

})

您可以通过添加其他属性，以增强该指令标记，然后使用属性来设置各种插件选项。

来源

2013-10-27 03:33:52 charlietfl

非常感谢。我会试一试。和是在这个函数（开始，结束）{}这是回调函数，我想我可以打电话给我的服务来更新所选日期范围内的数据 – forsimb

是的......正好。还将该服务作为依赖关系添加到指令中。 'app.directive（'myPicker'，函数（$ timeout，TheServiceIWant）{....' – charlietfl

如何更新bootstrap-daterangepicker日期更改上的绑定？

回答

相关问题