Angular js，从服务传递对象

Question

'use strict';

var app = angular.module('app');
app.factory('currTripService', function() {
      var currtrip ='';

    return{
        setCurrTrip: function(trip){ 
            currtrip = trip ;
        },
        getCurrTrip: function(){ 
            return currtrip ;
        },
    }
}); 


app.controller('TripCreateController', function($scope, $location, Trip,currTripService) {
    //The save method which is called when the user wants to submit their data
    $scope.save = function() {

        //Create the forum object to send to the back-end
        var trip = new Trip($scope.trip);
          console.log(trip);
         currTripService.setCurrTrip(trip);
         console.log(currTripService.getCurrTrip());
        //Save the forum object
        trip.$save(function() {
            //Redirect us back to the main page
            $location.path('/trip/day/1');

        }, function(response) {

            //Post response objects to the view
            $scope.errors = response.data.errors;
        });
    }
});

app.controller('TripDayCreateController',function($scope,$routeParams,currTripService){
    $scope.items=[];
    $scope.trip = currTripService.getCurrTrip();
 console.log($scope.trip.city);

    // $scope.products = productService.getProducts();
    $scope.addItem = function(item) {
                $scope.items.push(item);
                $scope.item = {};
    }
});

When i click on /trip/new , its does the save in TripCreateController and set the trip object inside currTripService. Then when redirected to TripDayCreateContoller the console.log(currTripService.getTrip()) , returns 'undefined'

Is it because Trip is an object ? How can i fix this ?

Answer 1

try this:

app.factory('currTripService', function() {
  var currtrip = '';
  var self = this;
  return{
    setCurrTrip: function(trip){ 
        self.currtrip = trip ;
    },
    getCurrTrip: function(){ 
        return self.currtrip ;
    },
  }
}); 

When you declare a function, this scope changes so currtrip was only existing in your getter/setter functions, but not outside.

Answer 2

The best way to do this is to use a class. Below is a an example of a class from CoffeeScript.

class currTripService

    # storage object
    @data = null

    # get data
    get: =>
        return @data

    # set data
    put: (data) =>
       @data = data

app.factory('currTripService', currTripService)

However if you want to do this without a class method then you can instead use something that would imitate a class:

var currTripService = function () {

    // storage variable
    var currTrip = null

    // reference to this element
    var _this = this

    return{
        // set this trip value
        setCurrTrip: function(trip){ 
            _this.currtrip = trip;
        },
        // get this trip value
        getCurrTrip: function(){ 
            return _this.currtrip;
        },
    }
}

app.factory('currTripService', currTripService);

Just a note: I put the function outside the factory to imitate how you'd typically call a class, but you can obviously just put all of the code in the function declaration.

app.factory('currTripService', function () {

    // logic

});