CODEWITHSUNDEEP
javascriptangularjs
Michael
Michael

Reputation: 318

Scope variable not updating in $scope.$watch

I have a watcher on a $scope variable which sets off a function to change the $scope variable to the beginning of the week of the date chosen. The function is returning the correct date but when I try to set the $scope variable to that date the view does not update. But checking it inside the inspector the $scope variable is changed but the view never updates. Here is the $watch function:

angular.module('hansenApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('hansenApp').controller('DatepickerCtrl', function ($scope) {
    $scope.startDate = new Date();
    $scope.endDate = new Date();

    $scope.status = {
        startOpened: false,
        endOpened: false,
    };

    $scope.openStart = function ($event) {
        $scope.status.startOpened = true;
    };

    $scope.openEnd = function ($event) {
        $scope.status.endOpened = true;
    };

    $scope.$watch('startDate', function (dateVal) {
        var oldDate = new Date(dateVal);
        var tempDate = getStartDateOfWeek(dateVal);

        if (oldDate.getTime() != tempDate.getTime()) {
            $scope.startDate = tempDate;
        }
    });

    $scope.$watch('endDate', function (dateVal) {
        var oldDate = new Date(dateVal);
        var tempDate = getEndDateOfWeek(dateVal);

        if ($scope.endDate.getTime() != tempDate.getTime()) {
            $scope.endDate = tempDate;
        }
    });

    function getStartDateOfWeek(date) {
        var ISOweekStart = date;
        ISOweekStart.setDate(date.getDate() - date.getDay());
        return ISOweekStart;
    }

    function getEndDateOfWeek(date) {
        var ISOweekEnd = date;
        ISOweekEnd.setDate(date.getDate() + (6 - date.getDay()));
        return ISOweekEnd;
    }
});

Edit 1: Here's the view:

<p class="input-group">
    <input type="text" id="endDate" class="form-control" uib-datepicker-popup="MM/dd/yyyy" ng-model="endDate" is-open="status.endOpened" close-text="Close" placeholder="End Date:" runat="server" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openEnd($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

Upvotes: 0

Views: 440

Answers (1)

Patrick Kelleter
Patrick Kelleter

Reputation: 2771

You do not change the reference of the date, but just the value of it.

A Date is an object in javascript, hence if you do not change the reference (replace it by a new Date() object) the angular change detector will not trigger again. So you will have to replace the startDate by a completely new instance of a javascript date with the given properties.

So replace

var ISOweekEnd = date;

by

var ISOweekEnd = new Date();

Upvotes: 1

Related Questions