Angularjs why does array not update on front end?

Question

I have two controllers, CompositionsController and CritiqueController and they use a service called Critiques to share an array object. I want to display the updated array object on the front-end. I console.err out the innerds of the array and you see that it updates, but does not update on the front-end. What am I doing wrong?

Also, side note, is it appropriate to have services that fulfill one function, to ensure that an array of critques are shared?

myApp.factory('Critiques', function () {
  return new Array();
});

Here is test of my application: http://plnkr.co/edit/3Wu7UH?p=preview

Also, to test my application, you must click the Capitalization button and then on a span tag. , which will add a model object called 'critique' into my array of 'critiques'.

Thank you for any kind of help or suggestions I should make.

runTarm · Accepted Answer · 2014-07-26 17:02:46Z

1

The $scope.critiques is modified in a jQuery's event handler, hence angular will not aware if it's changed.

You have to manually run $scope.$apply() afterward, to see it reflect on views.

And after the $scope.$apply() is added, you will found an another error says:

Error: Duplicates in a repeater are not allowed. Repeater: critique in critiques

That is because the same $scope.critique object is added to $scope.critiques everytime you click the spans. The ng-repeat doesn't allow any duplicate objects.

You could workaround that by using angular.copy() like this:

$scope.critiques.push(angular.copy($scope.critique));

or you might want to change how the critique object is construct.

Here is a working example: http://plnkr.co/edit/GjW4cN?p=preview

answered Jul 26, 2014 at 17:02

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

courtyen Over a year ago

Thank you,this works. Except, I don't know if I want to do a 'workaround'... I researched further into angular directives and I came up with another solution. Would you mind taking a look at this plnkr? plnkr.co/edit/3Wu7UH?p=preview

runTarm Over a year ago

That is the same plunker. Did you forget to freeze it in order to make changes become public?

Ashkan Hovold · Accepted Answer · 2014-07-26 17:09:15Z

0

if(!$scope.$$phase) {

      $scope.apply();
}

Problem might be that the view has already been written by the time you update the array.

answered Jul 26, 2014 at 17:09

Ashkan Hovold

9062 gold badges15 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angularjs why does array not update on front end?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related