factory is unable to convey data to another controller

Question

I am building a spa with angular and slim framework. As per the bellow mentioned code, what i am trying to do is, login page controller will pass data to landing page controller upon successful submission of user/psw. When i place the factory outside the http call/ log in function it gets the data but on the landing page factory does not deliver the data. And when i place it inside it stops to work. Please help me....

this factory is for sharing data across controllers

appDls.factory('sharedFactory', function () {
    var dataTobeShared = {};
    var interface = {};
    interface.add = function (d) {
        dataTobeShared = d;
    }
    interface.put = function () {
        return dataTobeShared;
    }
    return interface;
});

this controller is for the main portal user redirection and portal rendering

appDls.controller('DlsappController', ['$scope', '$state', 'multipartForm', 'sharedFactory', '$window', function ($scope, $state, multipartForm, sharedFactory, $window) {
    $scope.Userdata = [];
    $scope.login = function () {
        var url = "../scripts/routes.php/authen";
        multipartForm.post(url, $scope.login).then(function (d) {
            $scope.Userdata.push(d.data[0]);
            sharedFactory.add($scope.Userdata);
            $window.location.href = '../portal/landing.php';
        });
    }
}]);

this controller is for landing page routing

appDls.controller('landingController', ['$scope', '$state', 'multipartForm', 'sharedFactory', function ($scope, $state, multipartForm, sharedFactory) {
    $scope.UserInfo = sharedFactory.put();
    $scope.$watch('UserInfo', function (newValue, oldValue) {
        /*here we can use the user data from login page*/
        if (newValue.length == 1) {
            alert(newValue[0].fullname);
            $state.go(newValue[0].proftype);
        } else {
            alert("user not logged in successfully!");
            $state.go('default');
        }

    }, true);

}]);

Answer 1

When you do sharedFactory.add($scope.Userdata); your $scope.Userdata is another object, which is not watched by landingController. By reassigning dataToBeShared in sharedFactory.add function, you lose the reference to original object, so it is not reachable anymore from code.

To make landingController see the changes you need either to reimplement sharedFactory.add function to push values in sharedFactory.dataTobeShared array or use some event-based notification, not $watch.

Here is the jsfiddle to illustrate my words.

Answer 2

appDls.factory('sharedFactory', function () {
    var dataTobeShared = {};
return 
  {
    add: function (d) {
        dataTobeShared = d;
    }
    put: function () {
        return dataTobeShared;
    }
  }

});


appDls.controller('DlsappController', ['$scope', '$state', 'multipartForm', 'sharedFactory', '$window', function ($scope, $state, multipartForm, sharedFactory, $window) {
    $scope.Userdata = [];
    $scope.$watch('login',function () {
        var url = "../scripts/routes.php/authen";
        multipartForm.post(url, $scope.login).then(function (d) {
            $scope.Userdata.push(d.data[0]);
            sharedFactory.add($scope.Userdata);
            $window.location.href = '../portal/landing.php';
        });
    }
}]);


appDls.controller('landingController', ['$scope', '$state', 'multipartForm', 'sharedFactory', function ($scope, $state, multipartForm, sharedFactory) {
    $scope.UserInfo = sharedFactory.put();
    $scope.$watch('UserInfo', function (newValue, oldValue) {
        /*here we can use the user data from login page*/
        if (newValue.length == 1) {
            alert(newValue[0].fullname);
            $state.go(newValue[0].proftype);
        } else {
            alert("user not logged in successfully!");
            $state.go('default');
        }

    }, true);

}]);

Answer 3

The watcher needs to fetch the value from the factory on each digest cycle, and update the $scope variable.

appDls.controller('landingController', ['$scope', '$state', 'multipartForm', 'sharedFactory', function ($scope, $state, multipartForm, sharedFactory) {
    //$scope.UserInfo = sharedFactory.put();
    //$scope.$watch('UserInfo', function (newValue, oldValue) {
    $scope.$watch(sharedFactory.put, function (newValue, oldValue) {
        //UPDATE scope variable
        $scope.UserInfo = newValue;
           /*here we can use the user data from login page*/
        if (newValue.length == 1) {
            alert(newValue[0].fullname);
            $state.go(newValue[0].proftype);
        } else {
            alert("user not logged in successfully!");
            $state.go('default');
        }

    }, true);

}]);

The original code only set the scope variable once upon initialization of the controller. It needs to fetch the value from the factory on each digest cycle.