Question

I'm using AngularJS 1.2.x for my frontend with xeditable to edit items inplace and update the database. My backend is Rails 3.2.

I have a level object which has many versions, each version has a from_date & cost_cents field in which I have setup xeditable to do inline editing. The problem is after I edit these, if I refresh the screen the old values show up. If I disable caching in the browser however I get the correct values. So I need a way to flag the parent object's cache as dirty.

Here is an example of using xeditable on a date field for a level's version.

        <td editable-text="version.from_date"
            onbeforesave="update_version(level.id, version.id, $data, version.cost_cents)"
            class='date'>{{version.from_date}}</td>

Is it possible to get AngularJS or angular-xeditable to flag the parent object's cache as dirty so that it will reload the values from the database?

Update: Using a form instead

I replaced xeditable with a form and still got the same problem with caching. This doesn't happen on my development server only on staging & production servers.

    <form ng-submit="update_version(level.id, version.id, version.from_date, version.cost_cents)">
        Date: <input type='text' id="from_date" name="version.from_date" ng-model="version.from_date" />
        Cost: <input type='text' id="cost_cents" name="version.cost_cents"
                     ng-model="version.cost_cents"
                     form-cents-to-dollars />

        <button id="update_btn" type="submit" class="confirm_btn">
            <i class="fa fa-pencil"></i> Update Version
        </button>
        <td><a id="edit" href="/api#/levels/{{level.id}}/edit_version/{{version.id}}">Edit</a></td>
        <td><a id="delete" href="" ng-confirm-click="delete_version(version.id)">
            <i class="fa fa-trash-o fa-lg" /></a></td>
    </form>

Update: Deleting the cookie

If I load the staging server in firefox and do the same test, then go and delete the cookie for the current session and refresh my versions listing it now has the correct data from the database displayed.

Update: Responds 304 Not modified

The response I get is http 304: Not Modified, when infact I did modify the data, but as it's a child object AngularJS hasn't picked it up.

Update: thoughts

I'm starting to think it might be Rails which is doing the caching?

By switching this flag to true in development I can now replicate the same problem in development mode. Which saves a lot of time.

  config.action_controller.perform_caching = true

Update: Hacky workaround

If I tag onto the end of my AngularJS http call a random number then it doesn't call cache and it works correctly everytime. It's a bit hacky though and I would like a better way of doing this.

$http({method: 'GET', url: "/levels/#{$stateParams['id']}?rnd="+new Date().getTime(), cache: false}).
  success( (data, status, headers, config) ->
    $scope.level = data
  )

Answer 1

将此行放在我不想缓存的控制器中;

headers['Last-Modified'] = Time.now.httpdate

AngularJS setting an object cache as dirty

1 个答案: