AngularJs在值更改$watch时对隐藏输入调用函数

Question

我想使用 $watch 以便在每次更改这 3 个值之一时触发一个函数：

html:

<input type="hidden" name="source_x" id="source_x" ng-model="source_x"/>
<input type="hidden" name="source_y" id="source_y" ng-model="source_y"/>
<input type="hidden" name="id" id="id" ng-model="id"/>

我刚开始使用 Angular，我想使用 $watch 来触发一个函数。 每次我使用下面的可拖动功能拖动一个 div 时，这些值都会更改：

$("#div").draggable({
         helper : 'clone',
    stop:function(event,ui) {
        var wrapper = $("#container-emote").offset();
        var borderLeft = parseInt($("#container-emote").css("border-left-width"),10);
        var borderTop = parseInt($("#container-emote").css("border-top-width"),10);
        var pos = ui.helper.offset();
        $("#source_x").val(pos.left - wrapper.left - borderLeft);
        $("#source_y").val(-(pos.top - wrapper.top - borderTop)+185);
        $("#id").val(2);
    }
    });

我从这个开始，但我认为这是不对的，因为如果我移动一个 div 我将调用该函数的 3 次？此外，我不知道我是否可以在隐藏输入的情况下使用它。谢谢！

    //Fonction
$scope.$watch($scope.source_x, createEmote);
$scope.$watch($scope.source_y, createEmote);
$scope.$watch($scope.id, createEmote);

function createEmote(newValue, oldValue, scope){

                    }

更新：回答小提琴 我只是在拖动结束时添加一个函数

jsfiddle.net/5e7zbn5z/1/

Answer 1

你需要像这样使用你的$scope.$watch：

$scope.$watch(function() {
    return $scope.source_x + $scope.source_y + $scope.id;
}, function() {
    $scope.createEmote();
});

让你的createEmote 成为你$scope 的一个函数：

$scope.createEmote = function() {
    // do something with $scope.source_x, etc
}

编辑

正如@Sergey 在 cmets 中所述，确切的观察者功能将取决于您的预期数据。如果需要，您也可以复制它并更改返回的变量（类似于您现有的代码）。