I have a 3rd party jQuery application that I have minimal control over, and I cannot and do not want to use anything else, so please don't tell me that I shouldn't do that... so this application make a <select>
change to an empty value (that I have control) and I want my AngularJS ngModel to be made aware that jQuery changed that select to another value.
I can't seem to make it to work except using eval()
and I seriously don't want to use that so I tried all kind of different solution but nothing is working (apart from eval()
as I said). My solution would actually work if my ngModel would be a simple name (name), but it's in fact a complex name (object.name) and so this is were I'm stuck.
var optionObj = $('#selectId').val('');
angular.element(optionObj).triggerHandler('change'); // this fail
angular.element(optionObj).triggerHandler('onchange'); // this doesn't do anything
var scope = angular.element(optionObj).scope();
scope.$evalAsync(function(optionObj) {
var ngModelAttr = optionObj.attr("ng-model"); // get the ng-model attribute
scope[ngModelAttr] = ''; // this does not work with complex object
scope.user.language = ''; // this work, but since this could be dynamic naming, I can't use this way
console.debug(scope.user.language); // not empty 1st attempt, but empty on 2nd solution but is non-dynamic
// using eval() works but it's dangerous
eval("scope."+ngModelAttr+"=''");
}(optionObj));
So from the code that is there, and knowing our Angular looks like the following <select ng-model="user.language">...</select>
, how can I advise Angular that jQuery made a change? Again don't forget the fact that I might know it's user.language
here, but inside the jQuery application it doesn't know it, so everything has to be dynamically working.
If I use eval
then it works, but it's not only ugly but also dangerous...
Also worth to know that I'm using AngularJS 1.3
and that is the reason why I use $evalAsync()
instead of $apply()
Aucun commentaire:
Enregistrer un commentaire