Calling function defined in attributes in AngularJS directive

Question

I'm using a jQuery-ui datapicker and have defined a directive (credit: http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs) to instantiate it. I'd now like to add an html attribute that defines the function to call to determine whether a day should be selectable in the datepicker. How would I do this?

The js:

//Directive for showing the jquery-ui datepicker
myApp.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $j(function(){
                //Instantiate the datepicker
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    beforeShowDay:function(date) {
                        //TODO Call function defined in attrs, passing the date object to it
                        theDefinedFunction(date)
                    },
                    onSelect:function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    }
});

The html:

<input type="text" datepicker show-days="myShowDaysFunction()" />

The myShowDaysFunction() would be defined in the controller.

(Edit) - Controller function:

$scope.myShowDaysFunction = function(date) {
    console.log("I get called"); //Logs to the console
    console.log(date); //Logs undefined to the console
}

Thanks.

Sam · Accepted Answer · 2014-04-28 18:03:33Z

1

You need to create an isolate scope on your directive and take the function as a scope variable.

myApp.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        scope: {
            showDays: '&'
        },
        link : function (scope, element, attrs, ngModelCtrl) {
            $j(function(){
                //Instantiate the datepicker
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    beforeShowDay:function(date) {
                        //TODO Call function defined in attrs, passing the date object to it
                        scope.showDays({date: date});
                    },
                    onSelect:function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    }
});

Markup

<input type="text" datepicker show-days="myShowDaysFunction(date)" />

Controller Function

$scope.myShowDaysFunction = function(date) {
    alert(date);
}

Plunker Exmaple

http://plnkr.co/edit/kRc76icPUa9qTkPH4UKm?p=preview

edited Apr 28, 2014 at 18:03

answered Apr 28, 2014 at 16:23

Sam

15.8k26 gold badges89 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DavidMC1982 Over a year ago

Thanks. The function in my controller scope now gets called, but the date object is not passed to it. A console.log(date) in the beforeShowDay callback logs the date, but in the controller function it's undefined. Any clues?

Sam Over a year ago

Does your controller function have a date param? Could you post the controller function please?

DavidMC1982 Over a year ago

I've added the controller function.

Sam Over a year ago

Look at my answer, I have made the edit to show you how to receive the date on the controller function.

Sam Over a year ago

NP glad I could help!

Collectives™ on Stack Overflow

Calling function defined in attributes in AngularJS directive

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related