How to trigger ng-change event in a angularjs custom directive?

Question

I am using multidatepicker.js for a requirement that allows the user to select multiple dates in a calendar. For any change made by user, I want to trigger a ng-change event. I use a custom directive and implemented for the input field. Because the change event is angularjs, I am not able to trigger it in the custom directive.

HTML: I am using the below template, because I have the input field in ng-grid.

$scope.cellSkipDeliveryDateTemplate = '<input type="text" multidatepicker ng-model="row.entity[col.field]"  ng-change="updateEntity(row)" style="width: 150px; height: 50px;  overflow-y: auto; "/>';

and the custom directive is:

app.directive("multidatepicker", function ()
{
    return {
        require: "?ngModel", 

        link: function (scope, elm, attrs, ngModel)
        {
            $(function()
            {
                angular.element(elm).multiDatesPicker({ dateFormat: 'yy-mm-dd' });
                elm.change(
                    function () {
                        ngModel.$setViewValue($(this).val());
                    }
                );
            })

        }
    }

});

Could someone please help on how should the custom directive be so that it triggers the event with the value of the input as the parameter?

If you want to trigger `ng-change` you need to break reference on your `ng-model` binding. You can do this by reassigning your ng-model to a new instance. Example ngModel.$setViewValue(newObject);. I'll try to post a full answer once I get my head around your sample code. I am using ES6 so it takes me a while to decode es5. — Mokky Miah, Aug 23 '18 at 12:04

How to trigger ng-change event in a angularjs custom directive?

0 Answers0