如何观察或观察 AngularJS 服务中的输入属性变化？

Question

我的 UI 中有一个单选按钮，它有一个 ngModel，它 enable/disable 另一个通过 ngDisabled 的输入。

我想 observer/watch/trigger 当输入元素变成 enabled/disabled 并且必须在 Angular 服务中完成。我根本找不到该怎么做。这是我在指令中的做法：

// 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));
  }
});

但是如何在服务中做到这一点？？？
我不希望有另一个指令，我真的希望通过服务完成它。

问这个问题之前，我发现了这个Is it possible to 'watch' attributes' changes，我试了一下

scope.$watch(function() {return element.attr('disabled'); }, function(newValue){});

但这似乎不起作用，至少当我 enable/disable 我的单选按钮时（输入元素作为 ngDisabled 绑定到带有 ngModel 的单选按钮）

我还发现我们可以使用 jQuery.watch() 但我想坚持使用 vanilla javascript 或 jqLite。可能吗？

编辑
我应该提到这个服务是独立的，不能访问控制器，因为它是一个表单验证工具，它不知道外部（至少不超过元素本身和他的范围）。如果需要，您可以查看并使用它：Angular-Validation and it support Directive and Service depending on what or where you want the validation to happen and my problem was related to the code in the Service only. The answer from 帮我解决了...谢谢 :)

Answer 1

Scope 的目的是 "glue together" 您的应用程序的表示和业务逻辑。将 $scope 传递给服务没有多大意义。您总是可以在控制器初始化时使用此服务（与您的单选按钮视图关联的服务）执行 $scope.$watch 并触发对该服务的调用以执行您需要的更新。

如果您已经可以在您的服务中访问这个变量（从控制器获取），您应该能够做到：

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();
}

Answer 2

我相信您的属性 disabled 带有类似 disabled="{{disable}}" 的插值，这就是为什么您能够将 $observe 放在该值上尝试将相同的东西更改为 $watch 不适用于 attribute，您还需要 $interpolate 服务来评估您的属性插值。因此，实际值将被评估为 disabled 或 ''，如果更改它的状态，则 $watch 函数将相应地被触发。

代码

scope.$watch(function() {
   return $interpolate(element.attr('disabled'))(scope); //this will evaluate attribute value `{{}}``
}, function(newValue){
    //your code would be here
});

如何观察或观察 AngularJS 服务中的输入属性变化？

How to observe or watch an input attribute change in an AngularJS Service?

javascript

jquery

angularjs

angularjs-service

angular-services