How to save data to array use Factory in AngularJS

Question

Helloo, i trying save data from my Add new phone Form into array uses factory in AngularJS. is my Home.html file:

<div class="popup" dx-popup="popupOptions">
   <div class="dx-label">Phone Name</div>
   <div dx-text-box="nameOfPhone" ng-model="phoneName"></div><br /><br />

   <div class="dx-label">Phone Seria</div>
   <div dx-text-box="seriaOfPhone" ng-model="phoneSeria"></div><br /><br />

   <div class="dx-label">Image Url</div>
   <div dx-text-box="imgurlOfPhone" ng-model="phoneImgUrl"></div><br />
   <img src="{{phoneImgUrl}}" alt="Image" style="max-height:20%;max-width:20%" />

   <div dx-button="savePhone"></div>
   <div dx-button="cancelSavePhone"></div>

 </div>

for saving data i use factory in my HomeController.js i writed code:

var myApp = angular.module("myApp", ['dx']);
myApp.controller("defaultCtrl", ['$scope', 'notify', function ($scope, notify) {
$scope.savePhone = {
        text: "Save",
        type: "success",
        onClick: function () {
                            var phoneTest = $scope.phoneName + $scope.phoneSeria + $scope.phoneImgUrl;
        notify(phoneTest);
        }
    }

//factory session phones storage    
}]).factory('notify',['$window', function ($scope) {
    $scope.phonesStorage = [{}];
    return function (phoneTest) {
        $scope.phonesStorage.push(phoneTest);

        alert($scope.phonesStorage);

    };
}]);

For checking myself, i use alert($scope.phonesStorage); it works, data copies in to array, but, when i'm trying display data in my Home.html page use ng-repeat happened nothing:

<div ng-repeat="phone in phonesStorage">
            {{phone}}
</div>

how i should save data for displaying, i tryed save data in style like this var phoneTest = '{'+$scope.phoneName + $scope.phoneSeria + $scope.phoneImgUrl + '}'; and like this:

var phoneTest = '{'+'"Name"' + ':' + '"' + $scope.phoneName + '",' + '"Seria"' + ':' + '"' + $scope.phoneSeria + '",' + '"ImgUrl"' + ':' + '"' + $scope.phoneImgUrl + '"}';  ?

Thanks for your answers.

How can you inject $scope in factory ? Don't ever do that. and if you want to add phonetest to array do that in controller itself. — Amit Sirohiya
– Amit Sirohiya, Commented Mar 4, 2016 at 9:10
Hey, if one of the answers worked for you it would be great to mark it as accepted. Otherwise please specify your problems. — lisa p.
– lisa p., Commented Mar 7, 2016 at 9:17

lisa p. · Accepted Answer · 2016-03-04 09:38:48Z

1

Not quite sure what you are trying to do with the factory. Here is some advice.

What is this?

factory('notify',['$window', function ($scope)...

The injected service is $window but you call it $scope? This doesn't make sense!

The syntax should be the name of the injected service is the same as parameter, e.g.

factory('notify',['$window', function($window)...

What else?

Put the phone data in an object $scope.phone and bind to phone.phoneName, phone.phoneSeria, phone.ImgUrl

Then you have an object containing all the data you need and not separate values.

And finally

If you want to use a factory or some other service to save the phone, say with a REST service. You simply pass the object and NOT the scope! Don't pass the scope!.

You could do something like this:

notify(phone); //this contains your phone object, the object holds all variables

In your factory you have something like this (if you want to use $log, you need to inject it. Check log messages on your developer console of your browser https://developers.google.com/web/tools/chrome-devtools/)

$log.log("the phone", phone); // log object and check in console

I would advise you to use services only to execute functions and not to hold data. The list phoneStorage should be in your controller!

If you need any more help, let me know.

Happy coding! :)

answered Mar 4, 2016 at 9:38

lisa p.

2,15621 silver badges36 bronze badges

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

1 Comment

Minato Over a year ago

I think phoneStorage need not to be inside controller or inside of the service/factory. it should come from the server/DB and only accessible via the service. Though controller can hold a temporary reference to it.

Community · Accepted Answer · 2020-06-20 09:12:55Z

You are confusing the scope of controller and factory they don't have the same scope so you cannot access factories stuff inside the parent controller..

first up you need to change your factory code to return a singleton instead of a function. like

.factory('notify', ['$window', function(win) {
   var phonesStorage = [];
   return {
      phonesStorage: phonesStorage,
      store_phones: function (phoneTest) {
           phonesStorage.push(phoneTest);
           alert(phonesStorage);
        }
      }
    }
 }]);

and in your Controller,

.controller("defaultCtrl", ['$scope', 'notify', function ($scope, notify) {
   $scope.phonesStorage = notify.phonesStorage; //to get the phoneStorage from the notify scope
   $scope.savePhone = {
      text: "Save",
      type: "success",
      onClick: function () {
         var phoneTest = $scope.phoneName + $scope.phoneSeria + $scope.phoneImgUrl;
         notify.store_phones(phoneTest);
      }
    }
 }])

Advise

use service for this task.

if you have different controllers for handling the adding and showing the phones.

Factories generate you a brand new instance every time you inject it into a different scope.

Services on the other hand maintain there state throughout the application.

To achieve this simple change the word from factory to service like.

.service('notify', ['$window', function(win) {
   var phonesStorage = [];
   return {
      get_phones: function() {
         return phonesStorage;
      },
      store_phones: function (phoneTest) {
           phonesStorage.push(phoneTest);
           alert(phonesStorage);
      }
   }
 }]);

and in your controller

$scope.phonesStorage = notify.get_phones(); //to get the phoneStorage from the notify scope

Collectives™ on Stack Overflow

How to save data to array use Factory in AngularJS

2 Answers 2

1 Comment

Advise

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Advise

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related