Angular.js factory object not refreshed in view

Question

I have single view displaying investments + two others which are modals to register new investment which show up when user clicks 'add' (two modals because of two steps of registration). I created factory which is used in step1 and then in step2 in order to keep information regarding investment being registered - it works when you switch between step1 and step2, back and forth.
The problem is that within first view displaying investments I have icon "edit" and within its handler (edit method) I assign selected investment to factory but no change is reflected in step1 view, alas.

View displaying investments:

var module = angular.module("application", []);

module.controller("investmentsController", function ($scope, investmentsFactory, newInvestmentFactory) { 
    $scope.edit = function (id) {
        for (var i = 0; i < $scope.Investments.length; i++) {
            if ($scope.Investments[i].Id == id) {
                newInvestmentFactory.update($scope.Investments[i]);
            }
        } 
        $("#addInvestmentStep1Modal").modal("show");
    };
});

View step1 of registration

var module = angular.module("application");

module.factory("newInvestmentFactory", function () {
    return {
        investment: {
            Name: "",
            Description: "",
            Category: "",
            InterestRate: "",
            Duration: "",
            AmountRange: "",
            Url: "",
            Subscription: 0,
            PaymentType: "",
            Icon: ""
        },
        update: function (investment) {
            this.investment = investment;  
        }
    };
});

module.controller("newInvestmentStep1Controller", function ($scope, newInvestmentFactory) {
     $scope.Investment = newInvestmentFactory.investment; 
});

View step2 of registration

var module = angular.module("application");

module.controller("newInvestmentStep2Controller", function ($scope, newInvestmentFactory) {
    $scope.Investment = newInvestmentFactory.investment; 
});

The step1 view displaying registration is following

<form id="newInvestmentStep1Form" class="form-horizontal">
      <div class="input-group">
        <span class="input-group-addon input-group-addon-register">Name</span>
        <input id="Name" name="Name" type="text" class="form-control" ng-model="Investment.Name" required title="Pole wymagane" />
      </div>

Assignining new object to factory's object (newInvestmentFactory.investment) does not seem to be working but when I assign brand new value to some property of factory like

newInvestmentFactory.investment.Name = "name"

then it displays value correctly.

Pankaj Parkar · Accepted Answer · 2017-04-30 09:28:17Z

1

I can only suspect newInvestmentFactory's update method code. It is reassigning investment object to new investment object like this.investment = investment. By that line new investment object gets created, and old investment loose the reference. To keep the investment object to not create a new variable in update method, you could use angular.extend/angular.merge method. This method will not create a new reference of an object, but it ensures that all object property got updated.

update: function (investment) {
    angular.extend(this.investment, investment);
}

edited Apr 30, 2017 at 9:28

answered Apr 30, 2017 at 9:22

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

madhur · Accepted Answer · 2017-04-30 10:11:11Z

0

In your step controllers

$scope.Investment = newInvestmentFactory.investment;

is just one time assignment to $scope variable, this is not two way binding, so even if value of newInvestmentFactory.investment changes scope won't be updated. What you can do is to watch the factory variable newInvestmentFactory.investment and on change update the scope manually.

Hope this helps

answered Apr 30, 2017 at 10:11

madhur

1,0111 gold badge15 silver badges23 bronze badges

1 Comment

Pankaj Parkar Over a year ago

No, its object reference bounded between newInvestmentFactory.investment and $scope.investment, so any changes happens in investment of factory will appear in $scope.investment except reassignment(check my answer)

Collectives™ on Stack Overflow

Angular.js factory object not refreshed in view

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related