Angular 1.5: Directive using link function won't update the parent scope through the bindings

Question

I'm creating a directive to wrap the DateRangePicker. I'm using the link function to instantiate the daterangepicker and I attach a callback method on the directive's controller to update the scope variables. Problem is it doesn't seem to update those variables. I've made a PLNKR to demonstrate the issue I'm having. You can see that startDate and endDate update fine using the buttons. And in the console debug section you can see that the callback method is being called. It just doesn't update the parent scope. And you can tell that it does bind with one-way because the label shows up as Schedule.

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

var app = angular.module('demo', ['angularMoment']);

app.controller('Home', function ($scope) {
  $scope.startDate = moment();
  $scope.endDate = moment();
  $scope.updateStart = function () {
    $scope.startDate = moment();
  };
  $scope.updateEnd = function () {
    $scope.endDate = moment();
  };
});

app.directive('dateInput', function () {
  return {
    resolve: 'E',
    templateUrl: 'dateInput.html',
    scope: {
      dateStart: '=',
      dateEnd: '=',
      label: '@'
    },
    controller: function ($scope) {
      var self = this;
      self.update = function (start, end, label) {
        console.debug('DirectiveCtrl.update: ' + start.format('MM-DD-YYYY') + ' - ' + end.format('MM-DD-YYYY'));
        $scope.dateStart = start;
        $scope.dateEnd = end;
      };
    },
    link: function (scope, element, attrs, controller) {
      element.children('div').children('input').daterangepicker({
        timePicker: true,
        timePickerIncrement: 5,
        locale: {
          format: 'MM/DD/YYYY h:mm A'
        }
      }, controller.update);
    }
  }
});

HTML:

<div ng-controller="Home">
  <p>
    Start Date: {{startDate | amParse: 'MM-DD-YYYY'}}
    <br />
    End Date: {{endDate | amParse: 'MM-DD-YYYY' }}
  </p>
  <date-input date-start="startDate" date-end="endDate" label="Schedule"></date-input>
  <button type="button" ng-click="updateStart()">Update Start</button>
  <button type="button" ng-click="updateEnd()">Update End</button>
</div>

camelCase is needed for directives. dateStart and dateEnd become date-start and date-end respectively. — Muli Yulzary
– Muli Yulzary, Commented Apr 26, 2016 at 23:12
@MuliYulzary Thanks, I've updated the code but the issue is still there. — Stephen Gilboy
– Stephen Gilboy, Commented Apr 26, 2016 at 23:14
You also need to tell angular the model has changed so call $scope.$apply() in your update function after you're done updating the vars. — Muli Yulzary
– Muli Yulzary, Commented Apr 26, 2016 at 23:17
@MuliYulzary Thats the answer. If you add it as the answer I'll accept it. Thank you! So many hours wasted... — Stephen Gilboy
– Stephen Gilboy, Commented Apr 26, 2016 at 23:19

Muli Yulzary · Accepted Answer · 2016-04-26 23:21:09Z

1

You need to tell angular the model has changed so call $scope.$apply() in your update function after you're done updating the vars.

answered Apr 26, 2016 at 23:21

Muli Yulzary

2,5793 gold badges23 silver badges42 bronze badges

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

1 Comment

Stephen Gilboy Over a year ago

Thanks again for the help.

Collectives™ on Stack Overflow

Angular 1.5: Directive using link function won't update the parent scope through the bindings

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related