0

我正在将此插件与我的 AngularJS 应用程序和变量一起使用，以便在它们更改时存储开始和结束日期。

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

就像调用作用域的这个方法一样：

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

如何为此插件使用 ng-click 或 ng-change 或自定义指令？

4

2 回答 2

1

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

示例 html：

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

基本脚本大纲：

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-27T03:33:52.050 回答
0

AngularJS 中存在一个ngChange 指令，它应该按照您的描述进行操作。

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

于 2013-10-26T20:48:31.567 回答