How to Make a Directive Update Ng-Model on Jquery on Event

How to make a directive update ng-model on jquery on event?

This is sure thing that any plugin which has been added to angular doesn't update the ng-model of angular scope, we need to manually do it on it's jquery change event. In angular jquery plugin should always binded to DOM using directive, because directive does provide good control over a DOM.

As you asked in your question that ngModel, element, and scope object are not available inside dp.change event of datetimepicker, I don't think so this could be ever possible inside directive link function, you must have been did something else or you missed to explain in the question.

And for udpating ng-model of date picker you need add below code on your dp.change event

element.on('dp.change', function(event) {
  //need to run digest cycle for applying bindings
  scope.$apply(function() {
    ngModel.$setViewValue(event.date);
  });
});

In above code we retrieved updated date from event object, then assigned to the $viewValue(Actual string value in the view) of ng-model, thereafter in order update that to every where else wherever this ng-model variable has been used we need to run digest cycle manually using $apply() on directive link function scope. The reason behind the we ran the digest cycle is, we need to push that value inside ng-model variable $modalValue(The value in the model, that the control is bound to).

Working Plunkr

Let me know if you required anything more, I'll get you that detail, Thanks.

Update [(ngModel)] on jquery plugin event

We can do something like that. It works for me.

In html template

 <input type="text" class="form-control" [listItem]="list" autocomplete id="txtbox" name="txtbox" placeholder="myplaceholder" [(ngModel)]="myModel">

In typescript code

import { Directive, ElementRef, Input } from '@angular/core';
import { NgModel } from '@angular/forms';
declare var $;
@Directive({
  selector: '[ngModel][autocomplete]',
  providers: [NgModel]
})
export class Autocomplete {
  @Input() listItem: any = [];
  constructor(public _elementRef: ElementRef, private ngModel: NgModel) {
  }
  ngAfterViewInit() {
    let that = this;
    $(this._elementRef.nativeElement).typeahead({
      source: this.listItem.map(item => {
        return { id: item.account.toString(), name: item.account.toString() };
      })
    });

    this.ngModel.valueChanges.subscribe(function(value) {
      /* Set any value of your custom control */
      $(this._elementRef.nativeElement).data("newValue", value);
    });

    /* Inform ng model for any new change happened */
    $(this._elementRef.nativeElement).bind("change", ()=>{
      that.ngModel.update.emit($(that._elementRef.nativeElement).val());
    });
  }
}

How do you update model from directive in Angular 2?

[(ngModel)] updates foreigndate when input is fired which seems not to be the case when datepicker updates the value.

http://api.jqueryui.com/datepicker/ doesn't provide any information about events fired when the value changes.

If it would you could use this workaround

<input type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker (someEvent)="foreigndate=$event.target.value">

Listening to the change event this way might be worth a try.

Otherwise this should work

<input #datepicker type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker>

@ViewChild('datepicker') datePicker:ElementRef;

ngDoCheck() {
  this.foreigndate = this.datePicker.nativeElement.value;
}

How to update ng-model on event click using $event in Angularjs

You are tripping over the fact that ng-repeat creates a new scope. So your updates are happening in the child scope only and not showing up in the parent scope.

You could do something like this in your view:

<div ng-repeat="name in names">
  <input ng-model="name.name" ng-click="changeName($index)" value="{{ name.name }}">
</div>

$index in the 0 based counter. Then in your controller:

$scope.changeName = function($index) {
    $scope.names[$index].name = $scope.nameselected;
};

ng-model is not updating when using jquery element.val()

As you already knew, the problem is angular doesn't aware of the update made by jquery plugin. Luckily, you can use the plugin's onSelect callback to update ngModel, like this:

.directive("autoComplete", function() {
    return {
        restrict: "A" , 
        require: 'ngModel', // require ngModel controller
        scope: {
            AutoCompleteOptions : "=autoCompleteOptions", // use '=' instead of '&'
        },
        link: function (scope, element, attrs, ngModelCtrl) {

            // prevent html5/browser auto completion
            attrs.$set('autocomplete','off');

            // add onSelect callback to update ngModel
            scope.AutoCompleteOptions.onSelect = function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(element.val());
                });
            };

            scope.autocomplete = $(element).autocomplete(scope.AutoCompleteOptions);
        }
    }
});

---

Related Topics