CODEWITHSUNDEEP
javascriptangularjs
Kamel Mili
Kamel Mili

Reputation: 1434

passing value from page to another page

hey everyone am trying to send a value from page to another i tried to use a service then i made another controller so i can send data from controller to another controller , finally i wanted to console.log the result but nothing is showing

here's my app.js file

//***********************************************************************************   
var app=angular.module("siad",[]);
//***********************************************************************************   

app.controller("siadController",['$scope','$http','dataShare','$location',function($scope,$http,dataShare,$location){


$http.get("/formulaire/all")
.success(function(data){
    $scope.formulaire=data ;
}); 


 $scope.send=function(){
    //$scope.id=f.id_form;
    //console.log(f)
    /**$http.get("/question/form?idfrom="+f.id_form)
    .success(function(data){
        $scope.question=data;
    console.log($scope.question)
    })
    **/ 
      $scope.text = 'sssss';
      $scope.send = function(){
        dataShare.sendData($scope.text);
        $location("/user/lesFormulaires.html")
      }



}



}]);

//***********************************************************************************   

 app.controller("siadController2",['$scope','$http','dataShare',function($scope,$http,dataShare){


    $http.get("/formulaire/all")
    .success(function(data){
        $scope.formulaire=data ;
    }); 

     $scope.text = '';
     $scope.$on('data_shared',function(){
                 var text =  dataShare.getData();    
                 $scope.text = text;
                 console.log(text)
     });


 }]);
//***********************************************************************************   

  app.factory('dataShare',function($rootScope){
  var service = {};
  service.data = false;
  service.sendData = function(data){
      this.data = data;
      $rootScope.$broadcast('data_shared');
  };
  service.getData = function(){
    return this.data;
  };
  return service;
});

and here's the html button when i click am redirecting to another page and sending data through 

<a href="/user/lesFormulaires.html" ng-click="send();" class="btn btn-large btn-primary black-btn">clickme</a>

thanks to any help

Upvotes: 0

Views: 111

Answers (3)

victorjpe
victorjpe

Reputation: 137

Just changed one line of your app.js and can achieve your functionality

app.js

 //*********************************************
    var app=angular.module("siad",[]);
    //*********************************************  

app.controller("siadController",['$scope','$http','dataShare','$location',function($scope,$http,dataShare,$location){


$http.get("/formulaire/all")
.success(function(data){
    $scope.formulaire=data ;
}); 


 $scope.send=function(){
    //$scope.id=f.id_form;
    //console.log(f)
    /**$http.get("/question/form?idfrom="+f.id_form)
    .success(function(data){
        $scope.question=data;
    console.log($scope.question)
    })
    **/ 
      $scope.text = 'sssss';
      **/*$scope.send = function(){
        dataShare.sendData($scope.text);
        $location("/user/lesFormulaires.html")
      }*/**
      dataShare.sendData($scope.text);


}



}]);

//***********************************************************************************   

 app.controller("siadController2",['$scope','$http','dataShare',function($scope,$http,dataShare){


    $http.get("/formulaire/all")
    .success(function(data){
        $scope.formulaire=data ;
    }); 

     $scope.text = '';
     $scope.$on('data_shared',function(){
                 var text =  dataShare.getData();    
                 $scope.text = text;
                 console.log(text)
     });


 }]);
//***********************************************************************************   

  app.factory('dataShare',function($rootScope){
  var service = {};
  service.data = false;
  service.sendData = function(data){
      this.data = data;
      $rootScope.$broadcast('data_shared');
  };
  service.getData = function(){
    return this.data;
  };
  return service;
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title> The index</title>
    <script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app ="siad">
<div ng-controller="siadController">
<a ng-click="send();" class="btn btn-large btn-primary black-btn">clickme</a>
</div>
<div ng-controller="siadController2">
</div>
</body>
</html>

Upvotes: 1

pedrommuller
pedrommuller

Reputation: 16066

It seems like what you want is an event bus service for sending and receiving messages, that's more convenient.

this is the service that I use for such purposes:

angular.module('core').factory('event', [
    function() {
        var service = {};
        var events = {};

        service.on = function (eventId, callback) {
            // validations...
            if(!events[eventId])
                events[eventId] = [];
            events[eventId].push(callback);
            return {
                unsubscribe: function(){
                    service.unsubscribe(eventId, callback);
                }
            };
        };

        service.emit = function(eventId, data, callback){
            if(events[eventId] && !!events[eventId].length){
                for(var i=0; i<events[eventId].length; i++){
                    events[eventId][i](data, callback);
                }
                return true;
            }
            else return false;
        };
        service.unsubscribe = function(eventId, callback){
            if(events[eventId]){
                for(var i=0; i<events[eventId].length; i++){
                    if(events[eventId][i].toString() === callback.toString()){
                        events[eventId].splice(i,1);
                    }
                    return true;
                }
            }else return false;
        };

        return service;
    }
]);

Use a decorator to register the service and use it in whatever controller you want.

$provide.decorator('$rootScope', ['$delegate', 'event', function($delegate, event){
        Object.defineProperty($delegate.constructor.prototype, 'eventBus', {
            get:function(){
                var self = this;
                return{
                    on:function(eventId, callback){
                        var ev = event.on(eventId, callback);
                        self.$on('$destroy', function(){
                            ev.unsubscribe();
                        });
                    },
                    emit: event.emit
                };
            },
            enumerable: false
        });
        return $delegate;
    }]);

then the usage is as simple as:

$scope.eventBus.on('someEvent', function(){
}); 

$scope.eventBus.emit('someEvent');

EDIT:

You can add your decorator configuration at the time you bootstrap your application, for me is in 

angular.module('core').config(function($provide){ 
}

According to the documentation

You should use the Provider recipe only when you want to expose an API for application-wide configuration that must be made before the application starts.

this article explains a litte bit more about how to set up a provider configuration in angular, google it you'll find a millionf of articles regarding to this topic.

Upvotes: 2

Drag13
Drag13

Reputation: 5998

check this

(function(){
'use strict';

var app = angular.module('app',[]);

app.controller('firstCtrl', ['dataService', function(dataService){
dataService.store("Test");
}]);

app.controller('secondCtrl', ['dataService', function(dataService){
var data = dataService.getData();
console.log(data);
}]);

app.service('dataService', [function(){

var _storage ;

this.getData = function(){
return data;
}

this.store = function(data){
_storage = data;
}
}]);

}());

When you will change your state (or page) stored controller will be destroyed, but service will not, and you will be able to get data. This only works if you do not reload page using window.reload or smth like this.

If you do so, use session storage or any other independent storage.

Hope his will help

Upvotes: 1

Related Questions