How to watch or watch for input attribute change in AngularJS service?
I have a switch in my UI that has an ngModel and it enables / disables another login via ngDisabled.
I want to watch / watch / run when an input element becomes enabled / disabled and this needs to be done in an Angular service. I just can't seem to find how to do this. This is how I would do it in the Directive:
// for the case of field that might be ng-disabled, we should skip validation
// Observe the angular disabled attribute
attrs.$observe("disabled", function(disabled) {
if (disabled) {
// Turn off validation when element is disabled
cancelValidation();
} else {
// Re-Validate the input when enabled
var value = ctrl.$viewValue || '';
ctrl.$setValidity('validation', validate(value, true));
}
});
But how to do this in Service ???
I don't want to have another Directive, I really want it to be done through the Service.
Before asking the question, I found this Is it possible to "watch" the attributes? and i tried it
scope.$watch(function() {return element.attr('disabled'); }, function(newValue){});
but that doesn't seem to work, at least not when I turn on / off my switch (input element as ngDisabled bound to switch with ngModel)
I also found that we could use jQuery.watch (), but I want to stick with javascript javascript or jqLite. Is it possible?
EDIT
I should have mentioned that this Service belongs to her and does not have access to the Controller because she is a form validation tool and she is unaware of the outside (at least not more than the element itself and its scope). You can check it and use if you like: Angular-Validation and it supports directive and service depending on what or where you want to check and my problem is only with the code in the Service. The answer from pankajparkar helped me solve this problem ... Thanks :)
source to share
I suppose you had an disabled
interpolated attribute similar to disabled="{{disable}}"
why you were able to put $observe
on this value by trying to change the same to $watch
won't work on that attribute
, you need an additional $interpolate
service to evaluate the attribute interpolation. For the actual value to be evaluated, it is disabled
or ''
, and if changes are indicated, then the function $watch
will be triggered accordingly.
code
scope.$watch(function() {
return $interpolate(element.attr('disabled'))(scope); //this will evaluate attribute value `{{}}``
}, function(newValue){
//your code would be here
});
source to share
The purpose of the area is to "glue" the presentation and business logic of your application. It doesn't make sense to pass $scope
to the service. You can always do $scope.$watch
when you initialize your controller with this service (the one associated with your switch view) and call the service call to do the update you want.
If you can already access this variable in your service (by getting it from the controller), you should be able to:
app.service('myservice',function(){
this.listen = function($scope) {
$scope.$watch(function(){return someScopeValue},function(){
//$scope.dosomestuff();
});
}
});
//your controller
function myCtrl($scope,myservice) {
$scope.listen = function() {
myservice.listen($scope);
}
//call your method
$scope.listen();
}
source to share