AngularJs Call function on hidden input on value change $watch

Question

I want to use $watch in order to trigger a function each time one of those 3 values is changed :

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"/>

I just started angular and I want to use the $watch to trigger a function. Those value are changed each time I drag one div with the draggable function below :

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

I started with this but I think it is not right because if I move one div I am going to call 3 times the function ? Moreover I don't know if I can use it with input hidden.. Thank you !

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

function createEmote(newValue, oldValue, scope){

                    }

UPDATE : answer fiddle I just add a function at the end of stop of drag

jsfiddle.net/5e7zbn5z/1/

JosephGarrone · Answer 1 · 2016-07-03T08:39:08.460

1

You need to use your $scope.$watch like so:

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

And have your createEmote be a function on your $scope:

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

EDIT

As noted in the comments by @Sergey the exact watcher function will be dependent on your expected data. You could also just duplicate it and change which variable is returned (Similar to your existing code) if you want.

edited Jul 03 '16 at 08:39

answered Jul 03 '16 at 08:33

JosephGarrone

4,081
3
38
61

Imagine `source_x` increased on 1 and `source_y` decreased in 1. Sum will be the same. – Serhii Holinei Jul 03 '16 at 08:35
@SergeyGoliney correct, obviously it depends on the exact use case. For typical _user_ input it will be fine as the user won't be able to modify both fields at the same instant. Not knowing exactly what is expected to be entered I just went with a possible watcher. – JosephGarrone Jul 03 '16 at 08:37
If only inputs values have to be watched, I would go with `ng-change` first. – Serhii Holinei Jul 03 '16 at 08:39
1

There are a number of things I would change. But given the OP hasn't provided extensive details I thought it best to answer how to use $scope.$watch as opposed to offering alternatives. But good point nonetheless. – JosephGarrone Jul 03 '16 at 08:43
Ok thanks ! So Is this supposed to alert me each time I move my div ? $scope.$watch(function() { return $scope.source_x + $scope.source_y + $scope.id; }, function() { $scope.createEmote(); }); $scope.createEmote = function() { alert("ok"); } – DionysoSong Jul 03 '16 at 08:49
@guillaumekotarba it should. However I haven't been able to test it. If you can make a jsfiddle or a plunkr then I can help you further. – JosephGarrone Jul 03 '16 at 08:53
Here is the fiddle, i would like to have the alert each time I move my emote (and by the way not when the page load ^^) http://jsfiddle.net/5e7zbn5z/ – DionysoSong Jul 03 '16 at 09:26
Unfortunately, you are not able to use two-way data-binding with `input[type=hidden]`. [See this related github issue](https://github.com/angular/angular.js/pull/2574#issuecomment-17721308) and [this related SO answer](http://stackoverflow.com/a/18446730/1065780) – Serhii Holinei Jul 03 '16 at 09:51

AngularJs Call function on hidden input on value change $watch

1 Answers1