CODEWITHSUNDEEP
javascriptangularjs
user5303851
user5303851

Reputation:

Angular two way data binding not working when $scope is updated

I have a really serious problem, I'm updating, editing, deleting data, and the two-way data binding is not working.

This is one of my controllers:

'use strict';
var EventController = function($timeout, $scope, $state, EventModel) {
    this.$timeout   = $timeout;
    this.$scope         = $scope;
    this.$state         = $state;
    this.EventModel = EventModel;

    /**
     * When the page is requested, retrieve all the data.
     *
     */
    this.retrieve();
};

EventController.prototype = {
    create: function(event) {
        var that = this;
        this.EventModel.Model.insert(event)
            .then(function() {
                that.refresh();
            });
    },

    retrieve: function() {
        var that = this;
        this.EventModel.Model.find()
            .then(function(result) {
                that.$scope.events = result;
            });
    },

    one: function(id) {
        var that = this;
        this.EventModel.Model.one(id)
            .then(function(result) {
                that.$scope.event = result;
            });
    },

    update: function(id, event, state) {
        if (state !== undefined) {
            event.is_active = state;
        }

        var that = this;
        this.EventModel.Model.update(id, event)
            .then(function() {
                that.refresh();
            });
    },

    delete: function(id) {
        var check = $('[data-controller-input]:checked');
        var that    = this;

        $.each(check, function() {
            var target  = $(this);
            var id          = target.prop('id');

            that.EventModel.Model.remove(id)
                .then(function() {
                    that.refresh();
                });
        });
    },

    clear: function() {
        this.$scope.event = angular.copy(this.$scope.initial);
    },

    refresh: function() {
        this.$state.go(this.$state.current, {}, {reload: true});
    }
};

angular
    .module('adminApp')
    .controller('EventController',
        [
            '$timeout',
            '$scope',
            '$state',
            'EventModel',
            EventController
        ]
);

In the create, update and delete methods I need to update the HTML without refreshing the page, I already tried using, $scope.apply, $scope.digest, $timeout after the result came, but not happens in the HTML.

If I try $scope.apply and $scope.digest the error will be:

Prevent error $digest already in progress when calling $scope.$apply()

So I was trying to wrap the $scope.$apply or $digest with the $timeout, same result, nothing happens.

Thanks.

Upvotes: 0

Views: 331

Answers (2)

SaiGiridhar
SaiGiridhar

Reputation: 886

I am not sure, but try using the following function which checks the current phase before executing your function. It may solve the issue.

$scope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
      fn();
    }
  } else {
    this.$apply(fn);
  }
};

Usage:

$scope.safeApply(function() {
  //Your lines
});

Upvotes: 0

maddygoround
maddygoround

Reputation: 2300

First of all, your refresh method will never update your controller.it will simply fail just because this.$state.current won't be able to resolve any url ,template or controller.

And this is the main reason you are not able to see updated data ,just check your console you might be getting Error: Cannot transition to abstract state '[object Object]' error.

Update : I have create a plnkr.as i don't have access to event model code i simply removed it and try to create the same scenario.

http://plnkr.co/edit/RsI3TgKwcjGEXcTMKoQR?p=preview

see if this can help you

Upvotes: 0

Related Questions