how to pass date format from controller to directive using angularjs

Question

how to pass variable "$scope.dateformat" to "format" in directive.Please let me know if any examples are available or suggested. Please suggest me more examples on this.

     $scope.dateformat ="yyyy-mm-dd";

      menuModule.directive("datepicker", function(){
      return {
        restrict: "EAC", 
        require: "ngModel",
        scope: {
            "ngModel": "="
        },
        link: function(scope, elem, attr){
            $(elem).datepicker({
               format: "yyyy-mm-dd", // Above $scope.dateformat should be 
                                             //   called here
            }).on("changeDate", function(e){
                return scope.$apply(function(){
                    console.log(attr);
                    return scope.ngModel = e.format();
                });
            });

            return scope.$watch("ngModel", function(newValue){
                $(elem).datepicker("update", newValue);
            });
             }
          };
         });

you will get dateformat in scope in link function..put console.log(scope) in link fn in that you will find your scoped data — Nainish Modi
– Nainish Modi, Commented Jul 5, 2017 at 9:15
So this dateFormat is declared where? It looks to be outside of the directive, is it declared in the page controller where the directive resides? — rrd
– rrd, Commented Jul 5, 2017 at 9:15
dateformat is inside the controller and the directive is outside the controller — divya
– divya, Commented Jul 5, 2017 at 9:18
first controller should load and after that directive should load — divya
– divya, Commented Jul 5, 2017 at 9:20

Nikolaj Dam Larsen · Accepted Answer · 2017-07-05 09:19:14Z

You don't have a $scope variable in the global scope (I hope).

First approach

If this dataFormat is meant as a global configuration, you could register it in angular as a constant like this:

menuModule.constant('DATE_FORMAT', 'yyyy-mm-dd');

and then inject it in your directive:

menuModule.directive("datepicker", function(DATE_FORMAT){
    return {
        restrict: "EAC", 
        require: "ngModel",
        scope: {
            "ngModel": "="
        },
        link: function(scope, elem, attr){
            $(elem).datepicker({
                format: DATE_FORMAT
        });

        // .. rest is omitted
    };
});

Second approach

If you want the format to be passed to the directive through the attributes (and thus make it available in the scope) you'll add it as a scope binding like this:

menuModule.directive("datepicker", function(){
    return {
        restrict: "EAC", 
        require: "ngModel",
        scope: {
            "ngModel": "=",
            "dateFormat": "@"
        },
        link: function(scope, elem, attr){
            $(elem).datepicker({
                format: scope.dateFormat
        });

        // .. rest is omitted
    };
});

then whenever you use the directive, you can pass the format like this:

<datepicker date-format="yyyy-mm-dd"></datepicker>

or if it comes from a controller

<datepicker date-format="{{$ctrl.dateFormat}}"></datepicker>

Veera · Accepted Answer · 2017-07-05 09:23:19Z

0

Directive

    scope: {
        "format": "="
    },
    link: function(scope, elem, attr){
        $(elem).datepicker({
           format: scope.format
        })
    }

HTML

     <datepicker format="dateformat"></datepicker>

answered Jul 5, 2017 at 9:23

Veera

4072 gold badges7 silver badges21 bronze badges

Collectives™ on Stack Overflow

how to pass date format from controller to directive using angularjs

2 Answers 2

First approach

Second approach

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

First approach

Second approach

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related