CODEWITHSUNDEEP
angularjs
user435943
user435943

Reputation: 974

AngularJS factory two way data binding

I have an angular controller with some binded variables, and a factory that produces an array (used to populate options in a select control):

// Controller MyController
angular.module('users').controller('MyController', ['$scope', 'Authentication', 'MyFactory', 
    function($scope, Authentication, MyFactory) {
        $scope.user = Authentication.user;
        $scope.options = MyFactory.getOptions($scope.user.firstName, $scope.user.lastName);
        ...
    }
    ...
}

// Factory MyFactory
angular.module('users').factory('MyFactory', 
    function() {
        var _this = this;
        _this._data = {
            getOptions: function(firstName, lastName){
                return [
                    firstName + ' ' + lastName,
                    lastName  + ' ' + firstName
                    ...
                ];  
            }
        };
        return _this._data;
    }
);

It works well for the first time, but does not keep data in sync between the controller and the factory.

The intended effect is that a change in an argument of MyFactory.getOptions() modifies the resulting array assigned to $scope.options.

Upvotes: 4

Views: 763

Answers (1)

Nick Larsen
Nick Larsen

Reputation: 18877

It works the first time because you are calling a function which returns a new array, and then your view only ever references that array, and never calls the function again. The easiest solution is to add a $scope.$watch for your $scope.user variable that recalls the MyFactory.getOptions function.

// Controller MyController
angular.module('users').controller('MyController', ['$scope', 'Authentication', 'MyFactory', 
    function($scope, Authentication, MyFactory) {
        $scope.user = Authentication.user;
        $scope.options = MyFactory.getOptions($scope.user.firstName, $scope.user.lastName);
        $scope.$watch("user", function(newVal,oldVal,scope) {
            scope.options = MyFactory.getOptions(newVal.firstName, newVal.lastName);
        });
        ...
    }
    ...
}

Something like that anyway. Might have to play around with the syntax a bit.

Per your comments, try something like this:

// Controller MyController
angular.module('users').controller('MyController', ['$scope', 'Authentication', 'MyFactory', 
    function($scope, Authentication, MyFactory) {
        $scope.user = Authentication.user;
        $scope.options = MyFactory.getOptions($scope, "user");
        ...
    }
    ...
}

// Factory MyFactory
angular.module('users').factory('MyFactory', 
    function() {
        var _this = this;
        _this._data = {
            getOptions: function(scope, property){
                var updateableArray = [];
                function updateArray(user) {
                    //delete all elements of updateableArray
                    updateableArray.clear();
                    //add all the new elements of updateableArray from user argument
                    updateableArray.push(firstName + ' ' + lastName);
                    updateableArray.push(lastName  + ' ' + firstName);
                    ....
                }
                scope.$watch(property, function(newVal,oldVal,watchScope) {
                    updateArray(newVal);
                });
                updateArray(scope[property]);
                return updateableArray;  
            }
        };
        return _this._data;
    }
);

There is certainly a better way to organize it, but hopefully it's enough to help you get the idea.

Upvotes: 2

Related Questions