How to share the $Scope variable from one controller to another with parameters in Angularjs

Question

I have this:

$scope.products = [];

    $http.get('app/components/job/controller/teste.json').success(function (resource) {
        $scope.products  = resource;
});

$scope.getIdJobs = function(getIdJobs) {
    var result = $filter('filter')( $scope.products, {id:getIdJobs})[0];
    console.log(result);
    console.log(getIdJobs);
}

I wanted my second controller to get the $Scope.getIdJobs variable and store it in a variable again. How can I do that?

app.controller("job_detail", ["$scope", "$http", "$location", "$route","$rootScope", "$routeParams", function($scope, $http, $location, $route, $rootScope, $routeParams) {

    //image home
    $rootScope.home = false;

    //change color background in page job
    $scope.isOnCertainPage = function() {
        return $location.path() === "/job";
    };


    $http.get('app/components/job/controller/teste.json').success(function (resource) {
        $scope.products = resource;
        $scope.jobId = $routeParams.jobId;
        //console.log($scope.jobId);
    }); 

    console.log($scope.title, $scope.localidade, $scope.products);

}]);

app js.

app.config(function($routeProvider, RestangularProvider){
    $routeProvider
        .when("/",{
            templateUrl: "app/components/home/views/job_offers.html",
            controller: "employerCtrl"
        })
        .when("/job" , {
            templateUrl: "app/components/job/views/job.html",
            controller: "job"
        })
        .when("/job/:jobId" , {
            templateUrl: "app/components/job/views/jobdetail.html",
            controller: "job_detail" 
        })   
        .otherwise({
            redirectTo: '/'
        });


});

Answer 1

A simple solution is to have a Factory that returns the value you need (an object for example): JS:

// Inicializa a aplicação
var myApp = angular.module('myApp', []);

// Cria a factory para acompartilhar o valor da variável
myApp.factory('Fact', function(){
  return { Value: 'Foo' };
});

// 2 Controllers utilizando o mesmo valor
myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Value;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Value;
});

HTML:

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Value">
    First {{Alpha.Value}}
</div>

<div ng-controller="SecondCtrl">
<input type="text" ng-model="Beta.Value">
    Second {{Beta.Value}}
</div>

Demo: http://jsfiddle.net/o3751yt3/

When applications get bigger, more complex and more difficult to test you may not want to expose the whole object of a Factory this way, but instead give limited access for example via getters and setters:

myApp.service('Data', function(){
var data =
    {
        Value: ''
    };

    return {
        getValue: function () {
            return data.Value;
        },
        setValue: function (Value) {
            data.Value = Value;
        }
    };
});

With this approach, controllers consume service with new values and use $watch to observe changes :

myApp.controller('FirstCtrl', function( $scope, Data ) {

    $scope.Value = '';

    $scope.$watch('Value', function (newValue, oldValue) {
    if (newValue !== oldValue) Data.setValue(newValue);
    });
});

myApp.controller('SecondCtrl', function( $scope, Data ){

    $scope.$watch(function () { return Data.getValue(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.Value = newValue;
    });
});

HTML:

<div ng-app="myApp">

    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="Value">
        <br>Controller 1 : <strong>{{Value}}</strong>
    </div>
    <hr>
    <div ng-controller="SecondCtrl">
        Controller 2: {{Value}}
    </div>

</div>

Demo: http://jsfiddle.net/b6ekb3om/

Answer 2

I’m a beginner too but I’ll try to help you by giving you two tips:

1. There is a $localStorage which stores information and when loaded can be passed from controllers to controllers, much used for Ids.

2. Another way would be for you to store this $scope.getIdJobs in one service and then use it in other controllers calling it: job_detail.get();

Answer 3

You can put the products variable in $rootScope, so you can access it from $rootScope anywhere. But I advise you to use ui-router to pass parameters, it is more cohesive and with less chances of you having undesirable replacement variable value problems, or something like.

You must set the parameter in your state:

.state('contacts', {
    url: "/contacts",
    params: {
        param1: null
    },
    templateUrl: 'contacts.html'
})

And you’re gonna spend it that way:

<a ui-sref="contacts({param1: value1})">View Contacts</a>

$state.go('contacts', {param1: value1})

Answer 4

Good,

In my opinion, it is advisable for you to create a factory for the date, which will be a Objecto, where you can encapsulate the date and their métodos. Then just call the propriedades what you need in the controllers.

Here is the example in this jsfiddle

myApp.factory('myService', function() {
 return {
  data:[{id:1,content:''},{id:2,content:''},{id:3,content:''}, {id:4,content:''},{id:5,content:''},{id:6,content:'Restante Objecto...'},{id:7,content:''},{id:8,content:''},{id:9,content:''},{id:10,content:''}],
  result:{},
  filterById:function(id){

    //Estou a dar declarar o THIS numa variavel porque vou usa-lo dentro do forEach
    var that = this;

    that.data.forEach(function(item){
      if(item.id===id){that.result=item;}
    });
  }
 };
});

In the controller that accesses routerParams flames the method filterById().

function FirstCtrl($scope,myService) {
  var RouterParamsId = 6;
  myService.filterById(RouterParamsId);
  $scope.job = myService.result;
  console.log()
}

In the second controller just declare the result or if necessary you can even filter again with a new id.

function SecondCtrl($scope,myService) {
  $scope.job = myService.result;
}

Thus cleanse the controllers, and all that pertains to that date can be achieved in controllers and directives easily.

Or you’ll have the option of $rootScope, which also works for what you want.

About the routers, I advise you to take a look at the ui-router, a much superior tool in my view.