I have input that generates dynamically by ng-repeat
. for setting the value the user should click on the button and the popup windows will open. After selecting the value, the user will click on confirm button and I set the value by this code:
function SetLatLng() {
if (!window.opener || window.opener.closed) {
return;
}
var txtLat = window.opener.document.getElementById(latId);
var txtLng = window.opener.document.getElementById(lngId);
var lat = document.getElementById('latitude').value;
var lng = document.getElementById('longitude').value;
if (txtLat) {
window.opener.angular.element(txtLat).$rootScope().$apply(function () {
window.opener.angular.element(txtLat).controller('ngModel').$setViewValue(lat);
});
}
if (txtLng) {
// Update the value of the ng-model attached to txtLng
window.opener.angular.element(txtLng).$rootScope().$apply(function () {
window.opener.angular.element(txtLng).controller('ngModel').$setViewValue(lng);
});
}
window.close();
}
The value of input visibly changes but the ng-model does not change. I also write a directive but it doesn’t work either.
myapp.directive('setNgModelFromValue', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.push(function (value) {
ngModel.$setViewValue(value);
ngModel.$render();
return value;
});
ngModel.$formatters.push(function (value) {
ngModel.$setViewValue(value);
ngModel.$render();
return value;
});
element.on('input', function () {
scope.$apply(function () {
var value = element.val();
ngModel.$setViewValue(value);
ngModel.$render();
});
});
}
};
});
I don’t why It’s not working. I also use scope.$apply()
instead of $rootScope().$apply
but still not working.