Directive updates parent scope value

Question

I use bootstrap-datepicker for its ability to select a range of days. I try to put it in Angular directive and expect to update the parent scope value when the date changed, and the date format must be in the whole week (20-04-2015 - 26-04-2015)

      var app = angular.module('angular.controls.weekDatePicker', [])
    app.directive('weekDatePicker', ['$filter', '$parse', function ($filter, $parse) {
        return {
            restrict: 'A',
            require: 'ngModel',      
            link: function (scope, element, attrs, ngModelCtrl) {               
                var ngModelParseFn = $parse(attrs.ngModel);    
                element.datepicker({
                    minViewMode: parseInt(attrs.minviewmode),
                    format: attrs.format,
                    language: "vi"
                }).on('changeDate', function (e) {
                    scope.$apply(function () {
                        console.log(scope.$parent);
                        if (attrs.week == 'true') {
                        }
                        else {
                           // code
                        }
                    });
                });

                element.datepicker('update', new Date()); //reset to now
                if (attrs.week == 'true') {
                    scope.$watch(function () {
                        return ngModelCtrl.$modelValue;
                    }, function (newValue) {

                        var date = element.data().datepicker.viewDate;
                        var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                        var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);    
                        startDate = $filter('date')(startDate, 'dd-MM-yyyy');
                        endDate = $filter('date')(endDate, 'dd-MM-yyyy');                        
                        console.log(scope.$parent.fixtureDate);   //fail to get parent scope value ?

                        var dateText = startDate + ' - ' + endDate;
                        ngModelParseFn.assign(scope, dateText);
                    });
                }

                scope.$on("$destroy",
                               function handleDestroyEvent() {
                                   element.datepicker('remove');
                               }
                           );          
            }
        };
    }]);

View:

 <input week-date-picker ng-model="fixtureDate" minviewmode="0" format="MM-yyyy" class="form-control" week="true" style="width:200px" />

Plunker source here

camden_kid · Answer 1 · 2015-04-20T11:13:24.197

I've done a version with a callback (Plunker).

JS

    element.datepicker({
      minViewMode: parseInt(attrs.minviewmode),
      format: attrs.format,
      language: "vi"
    }).on('changeDate', function(e) {
          var date = e.date;
          var firstDay = new Date(date.getFullYear(), date.getMonth(), 1); // 0 = january
          var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

          var startDate = firstDay.getDate() + '-' + (firstDay.getMonth() + 1) + '-' + firstDay.getFullYear();
          var endDate = lastDay.getDate() + '-' + (lastDay.getMonth() + 1) + '-' + lastDay.getFullYear();

          scope.changeDate({startDate: startDate, endDate: endDate});
    });

Note this in the directive;

  scope: {changeDate: "&"},

index.html

    $scope.fixtureDate = {
      startDate: startDate,
      endDate: endDate
    };

    $scope.updateFixtures = function(startDate, endDate) {
      $scope.fixtureDate.startDate = startDate;
      $scope.fixtureDate.endDate = endDate;
    };

thanks for your help. I might not be clear about my question though, i need to update the model value and also display the input with the format: the whole week date. Balance these 2 make me headace, not sure how to force it display the custom message without using ngModelParseFn.assign(scope, dateText); >> it will force a change on model value, which is not good. — nam vo, Apr 20 '15 at 15:11

score 0 · Answer 2 · answered Apr 20 '15 at 09:38

0

You should change the html to

<input week-date-picker ng-model="fixtureDate" minviewmode="0" format="MM-yyyy" class="form-control" week="true" style="width:200px" />

You have no variable called dt in your code. The variable that you want to change is called fixtureDate.

answered Apr 20 '15 at 09:38

APD

1,459
1
13
19

Thanks. I know but then how can i update the fixture.startdate and enddate ? It will pass in a custom string "19-04-2015 - 25-04-2015" . Maybe i have to manually split string and update the model, but it's not nice. – nam vo Apr 20 '15 at 09:46
no it does not pass a string. fixtureDate is an object which contains two date objects. Here is a working plunker http://plnkr.co/edit/n648bPe0QkYY8233OZUm?p=preview. It is your plunker with the change I suggested in my answer. – APD Apr 20 '15 at 09:57

Directive updates parent scope value

2 Answers2

Linked