JSData object property causing an infinite loop

Question

I have a data property that needs to be represented on the backend like this

YYYY-MM-DD

However angular material date picker needs a date object. So I figure that I'll just use a property. However when I do create a property it causes an infinite recursion.

My JSData model looks like this.

function BlogFactory (DS) {
  return DS.defineResource({
    name: 'Blog',
    endpoint: 'blog',
    idAttribute: 'slug',
    computed: {
      _publish_at: {
        enumerable: true,
        get: () => {
          if (this.publish_at) {
            return moment(this.publish_at).toDate();
          }
        },
        set: (v) => {
          this.publish_at = moment(v).format('YYYY-MM-DD');
        }
      }
    }
  });
}

My HTML looks like this. Blog is a Blog object.

  <md-datepicker ng-model="blog._publish_at"
      ng-model-options="{'getterSetter': true}"></md-datepicker>

It causes this error.

[$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Does anyone know how to fix this? Thank you!

Answer 1

I believe this is because of Angular's dirty-checking. During each digest loop Angular checks if the current value of blog._publish_at is equal to the value from the previous loop, and because you're using an ES5 getter function, which is invoked every time the property is accessed, Angular sees a new Date object object in each digest loop, and hence thinks that value is changing.

You may need to consider moving your getter/setter logic for this particular property from the model instance to your View (your controller/directive), and in this instance drop the use of ES5 getters/setters.