CODEWITHSUNDEEP
angularjsfactory
Uladz Kha
Uladz Kha

Reputation: 2364

How to save data to array use Factory in AngularJS

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); enter image description here 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>

enter image description here

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.

Upvotes: 0

Views: 2211

Answers (2)

Minato
Minato

Reputation: 4533

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

Upvotes: 0

lisa p.
lisa p.

Reputation: 2158

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! :)

Upvotes: 1

Related Questions