How to access directive parameter in Angular JS?

Question

I'm pretty new to Angular and I have run into a slight problem. I have this simple datepicker directive which works

app.directive('datepicker', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel){
        $(elem).datepicker({
            onSelect: function(dateText){
                scope.$apply(function(){
                    ngModel.$setViewValue(dateText);
                });
            }
        });
        }
    }
});

And the html I use to call it is

<input datepicker data-ng-model="day.date" readonly/>

I would like to be able to change the onSelect function called by the datepicker – hopefully with something like this.

<input datepicker="myOnSelectMethod()" data-ng-model="day.date" readonly/>

Then the directive would look something like this

app.directive('datepicker', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel){
            if(myOnSelectMethod is defined){ //how do I access myOnSelectMethod here?
                $(elem).datepicker({
                    onSelect: myOnSelectMethod();
                });
            }
            else{ //proceed as before
                $(elem).datepicker({
                    onSelect: function(dateText){
                        scope.$apply(function(){
                            ngModel.$setViewValue(dateText);
                        });
                    }
                });
            }
        }
    }
});

So my question is: how do I access the new onSelect function I want to execute from my link function?

Looking through the docs and other SO questions this seems like it should be possible but I haven't been able to make it work. I've come up with an ugly workaround by using an ng-click to activate the datepicker on a given element, but I would like to learn how to make this work if possible. Thanks!

check like this: if(attr["datepicker"] == "myOnSelectMethod" && typeof myOnSelectMethod === "function") — Ivan Chernykh
– Ivan Chernykh, Commented Sep 3, 2013 at 16:46
@Cherniv thanks! That's exactly what I was looking for. I was trying to find it in the scope before... was turning into a nightmare! — ORL
– ORL, Commented Sep 3, 2013 at 17:05

Ivan Chernykh · Accepted Answer · 2013-09-03 17:14:29Z

3

You can check this way:

if( attr["datepicker"] == "myOnSelectMethod" && 
    typeof myOnSelectMethod === "function" ){
      // ...
}

Or even:

if( typeof scope[attr["datepicker"]] === "function" ){ // Instead of `scope` 
    // ...                                             // may be any other object,
}                                                      // `window` for example

edited Sep 3, 2013 at 17:14

answered Sep 3, 2013 at 17:08

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

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

Collectives™ on Stack Overflow

How to access directive parameter in Angular JS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related