首頁(yè) 猿問(wèn) 如何在事件上對(duì)jquery進(jìn)行指令...

如何在事件上對(duì)jquery進(jìn)行指令更新ng-model？

JavaScript JQuery AngularJS

暮色呼如 2019-11-20 12:39:25

我正在為jQuery日期選擇器插件創(chuàng)建AngularJS指令，當(dāng)日期選擇器日期更改時(shí)，該插件應(yīng)更新ng-model。這是到目前為止的代碼：angular.module('bootstrap-timepicker', []).directive('timepicker', [ function() { var link; link = function(scope, element, attr, ngModel) { element.datetimepicker(); element.on('dp.change', function(event) { // update ngModel ? }); }; return { restrict: 'A', link: link, require: 'ngModel' }; }]);考慮到在調(diào)用該事件時(shí)范圍，元素，屬性，ngModel不可用，如何在“ dp.change”事件中更新ngModel？謝謝！

查看完整描述

2 回答

白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

可以肯定的是，已添加到angular的任何插件都不會(huì)更新ng-modelangular范圍的，我們需要在它的jquery change事件上手動(dòng)進(jìn)行操作。在有角度的jquery中，插件應(yīng)始終使用指令綁定到DOM，因?yàn)橹噶畲_實(shí)提供了對(duì)DOM的良好控制。

正如您在問(wèn)題中所問(wèn)的那樣ngModel，，element和scope對(duì)象在dp.change事件內(nèi)不可用datetimepicker，我不認(rèn)為這在指令鏈接函數(shù)內(nèi)是可能的，您一定已經(jīng)做了其他事情，或者您錯(cuò)過(guò)了問(wèn)題的解釋。

為了更新日期選擇器的ng-model，您需要在dp.change事件中添加以下代碼

element.on('dp.change', function(event) {

//need to run digest cycle for applying bindings

scope.$apply(function() {

ngModel.$setViewValue(event.date);

});

在上面的代碼中，我們從事件對(duì)象中檢索了更新的日期，然后將其分配給的$viewValue（視圖中的實(shí)際字符串值）ng-model，然后為了將其更新到ng-model使用該變量的每個(gè)其他位置，我們需要使用$apply()on指令手動(dòng)運(yùn)行摘要循環(huán)鏈接功能范圍。運(yùn)行摘要循環(huán)的原因是，我們需要將該值推送到ng-model變量$modalValue（控件綁定到模型中的值）中。

反對(duì) 回復(fù) 2019-11-20