Angular updating var in service

Question

I'm trying to make a service, where I can check if an building is updated or not.

so I have the following setup for the serivce

define(['app'], function (app) {

    'use strict';
    app.service('BuildingService', function ($http, $q, $rootScope) {
        var buildings = null;
        var dirtyBuildings = [];
        var originalBuildings = [];


        this.getBuilding = function(id) {
            var deferred = $q.defer();
            // check if buildings were set
            if (buildings == null) getBuildings();

            // get index
            var index = arrayObjectIndexOfBuilding(buildings, { BuildingId: id });
            if (index < 0) deferred.reject("Building doesn't exist");
            // return object
            deferred.resolve(buildings[index]);

            return deferred.promise;
        }
        this.getBuildings = function () {
            var deferred = $q.defer();
            if (buildings == null) {
                $http.get('http://ws33177.sidmar.be/FMMService/api/Building').success(function (data) {
                    buildings = data;
                    deferred.resolve(buildings);
                }).error(function () {
                    deferred.reject();
                });
            } else {
                deferred.resolve(buildings);
            }
            return deferred.promise;

        }


        this.saveBuildings= function() {
            // TODO: Save logic
        }

        this.updateBuilding = function (newBuilding) {
            console.log("Updating");

            var deferred = $q.defer();

            // check if building exists in list
            var index = arrayObjectIndexOfBuilding(buildings, newBuilding);
            if (index < 0) deferred.reject("Building doesn't exist");
            console.log(newBuilding, buildings[index]) // <--- referenced in text

            // check if updated
            if (angular.equals(buildings[index], newBuilding)) {
                console.log("Same object");

            } else {
                // check if already dirty or not
                var dirtyIndex = arrayObjectIndexOfBuilding(dirtyBuildings, newBuilding);
                if (dirtyIndex < 0) {// new dirty
                    console.log("Something changed, new dirty");
                    // save in dirty list
                    dirtyBuildings.push(newBuilding);
                    // save original
                    originalBuildings.push(buildings[index]);
                } else {// already dirty
                    var originalIndex = arrayObjectIndexOfBuilding(originalBuildings, newBuilding);

                    // check if isn't reverted
                    if (angular.equals(originalBuildings[originalIndex], newBuilding)) {
                        console.log("Back to original");
                        // if same, remove from dirty buildings
                        dirtyBuildings.splice(dirtyIndex, 1);
                        // set old back
                        buildings[index] = originalBuildings[originalIndex];
                    } else {
                        console.log("Something changed, updating dirty");

                        // update the dirty building with latestd changes
                        dirtyBuildings[dirtyIndex] = newBuilding;
                    }
                }

                // update buildinglist
                buildings[index] = newBuilding;
            }

            $rootScope.$broadcast('updatedBuilding', { totalDirty: dirtyBuildings.length });
            deferred.resolve();

            return deferred.promise;
        }

        function arrayObjectIndexOfBuilding(arr, obj) {
            if (arr == null || obj == null) return "nothing";

            for (var i = 0; i < arr.length; i++) {
                if (arr[i].BuildingId == obj.BuildingId) {
                    return i;
                }
            }

            return -1;
        };
    });

    return app;
});

then I get the buildings via:

BuildingService.getBuilding(page.options.BuildingId).then(function (result) {
    $scope.building = result
    $scope.$watch('building', function (newVal) {
        BuildingService.updateBuilding(newVal);
    }, true);
}, function () {
    ons.notification.alert({ message: 'An error has occurred!' });
});

Building has a value called score (so $scope.building.score) but when I update that value, the original value in the buildings var in my service is already updated. So the chcek always returns Same object.

What might I be doing wrong?

Answer 1

You are creating a new watch each time you call the BuildingService.getBuildings method. instead create the watch outside of the promise success callback.

$scope.property = 'score';
var buildingWatch;
BuildingService.getBuilding(page.options.BuildingId).then(function (result) {
    $scope.building = result;
}, function () {
    ons.notification.alert({ message: 'An error has occurred!' });
});


$scope.$watch('property', function (newVal) {
    if (buildingWatch) {
      buildingWatch();
    }
    buildingWatch = $scope.$watch('building.' + newVal , function (newVal) {
      BuildingService.updateBuilding(newVal);
    }, true);
    BuildingService.updateBuilding(newVal);
}, true);

If you want to watch for dynamically created properties I suggests create a new watch inside another and remove it each time the property changes