CODEWITHSUNDEEP
angularjsangularjs-directive
DavidMC1982
DavidMC1982

Reputation: 57

Calling function defined in attributes in AngularJS directive

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.

Upvotes: 1

Views: 610

Answers (1)

Sam
Sam

Reputation: 15771

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

Upvotes: 1

Related Questions