首頁猿問如何在事件上對jquery進行指令...

如何在事件上對jquery進行指令更新ng-model？

JavaScript JQuery AngularJS

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

我正在為jQuery日期選擇器插件創(chuàng)建AngularJS指令，當日期選擇器日期更改時，該插件應(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)用該事件時范圍，元素，屬性，ngModel不可用，如何在“ dp.change”事件中更新ngModel？謝謝！

查看完整描述

2 回答

白豬掌柜的

TA貢獻1893條經(jīng)驗獲得超10個贊

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

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

為了更新日期選擇器的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);

});

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

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