javascript - 服务中的值更改通知

Question

在下面example当一个项目的选项值改变时，我想调用我的服务的 submitOption 函数。

是否可以在不使用 ng-click/ng-change 或修改 form 元素内的任何内容的情况下这样做？

我是 Angular 的新手，可能没有正确使用它。但我的目标是以编程方式“观察”项目的值(value)，并在它发生变化后将其提交给服务器。

我知道 $scope.watch()，但我读到将作用域传递到服务中并不是一个好主意

Answer 1

您可以在 Controller 中使用 $scope.$watch 而不是服务:

$scope.records.items.forEach(watchRecordValue);

function watchRecordValue(record){
    $scope.$watch(function(){ return record.option; }, function(newVal, oldVal){
        if(newVal !== oldVal){
            $scope.records.submitOption(record);
        }
    });
}

但是，我认为以上是一种疯狂的解决方法，绝对应该避免。

它会明显更清洁、更易于维护并且使用起来更快 - 正如您提到的那样您正在避免 - ng-change。事实上，您只需将 HTML 上的输入标签更改为:

<input name="options" 
       type="radio" 
       ng-model="item.option" 
       ng-change="records.submitOption(item)" 
       ng-value="option.id" />

(ng-change="records.submitOption(item)" 部分是唯一的区别。)

编辑(添加“包装器”解决方案):

如果修改表单确实不可行，可以将表单包裹在自己的指令中。这是一个人为的例子:

myApp.directive('myWatch', [function () {
    return {
        restrict: 'A',
        scope: {
            myWatch: '=',
            myHandler: '@',
        },
        link: function(scope, element, attr) {
            scope.$watch('myWatch', function(newVal, oldVal){
                if(newVal !== oldVal){
                    // Parent because we've created a scope for this directive
                    scope.$parent.$eval(attr.myHandler); // Copied from ngChange...
                }            
            });
        }
    };
}]);

现在您可以通过包装保持表单不变:

<div my-watch="item.option" my-handler="records.submitOption(item)">
    <form> <!-- your old form contents go here --> </form>
</div>

这是用这个包装器修改过的 JSFiddle:http://jsfiddle.net/shjejb34/

注意:几乎所有阅读本文的人都应该在上面执行 ng-change 解决方案。 wrapper 指令正在重新发明轮子，复制 Angular 已经为我们提供的良好功能。