1

Eu tenho isto:

$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);
}

Pretendia que o meu segundo controlador conseguisse obter a variavel $scope.getIdJobs e guardar numa variável novamente. Como posso fazer isso?

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: '/'
        });


});
10
  • Veja se ajuda: stackoverflow.com/questions/12008908/…
    – Miguel
    Commented 11/11/2016 às 10:06
  • é um bom exemplo mas como estou a usar parametros em páginas diferentes ele perde-se a meio Commented 11/11/2016 às 10:16
  • Como assim? A sua dúvida era compartilhar uma variavel entre controladores, então há mais coisas pelo meio? Se sim, altere a sua pergunta e adicione essa informação. Commented 11/11/2016 às 10:18
  • ja alterei o conteúdo Commented 11/11/2016 às 10:20
  • Ainda não consigo entender o pretendido. Olhando para o link que o @Miguel compartilhou e a sua dúvida, ele resolve o problema. O que você entende no seu código como sendo parâmetro? Onde está esse parâmetro? Commented 11/11/2016 às 10:22

4 Respostas 4

2

Sou iniciante também mas vou tentar te ajudar dando duas dicas:

  1. Existe $localStorage que guarda informações e quando carregado pode ser passada de controllers em controllers, muito usado para IDs.

  2. Outra forma seria você armazenar esse $scope.getIdJobs em um serviço e depois utiliza-lo em outro controllers chamando-o: job_detail.get();

2
  • Tinha a ver com isso como o miguel disse em cima obrigado. Agora falta fazer com que a variável que criei guarde a informação da variável do ng-click e fica resolvido. Sabes se isso é possivel? Commented 11/11/2016 às 10:40
  • O $localStorage não é nativo do angular, os módulos podem ser baixados aqui: github.com/gsklee/ngStorage O método 2, é o que descrevo na minha proposta de resposta. O jeito certo é o que funciona, mas existe o jeito recomendado também rsrsrs Commented 13/04/2017 às 20:33
2

Uma solução simples é você ter uma factory que retorna o valor que vc precisa (um objeto por exemplo): 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/

Quando aplicativos ficam maiores, mais complexos e mais difíceis de testar você pode não deseja expor todo o objeto de uma factory desta maneira, mas em vez disso, dar acesso limitado por exemplo via getters e setters:

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

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

Com esta abordagem os controllers consomem o service com novos valores e utiliza o $watch para observar as alterações :

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/

2
  • 1
    Resposta super útil! Gostei muito e não sabia usar o $watch. Estou terminando meu aplicativo e isso pode mudar muito as coisas. Commented 18/04/2017 às 17:36
  • o $watch é um recurso muito bom de comunicação entre os componentes do angularjs, o uso excessivo não é recomendado pois ele ativa uma série de processos que podem elevar o consumo de recursos da sua aplicação. Use com moderação. Commented 18/04/2017 às 18:26
0

Você pode colocar a variável products no $rootScope, assim você pode acessar ela pelo $rootScope em qualquer lugar. Mas eu te aconselho a usar o ui-router para fazer a passagem de parâmetros, fica mais coeso e com menor chances de você ter problemas de substituição indesejável de valor de variável, ou algo do tipo.

Você deve definir o parâmetro no seu state:

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

E vai passa-lo dessa maneira:

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

$state.go('contacts', {param1: value1})
2
  • Não é uma boa prática ficar clocando valores no $rootScope, stackoverflow.com/a/35346083 Commented 13/04/2017 às 20:30
  • Foi o que eu disse @LeonanCarvalho, apenas leia com atencao: "Você pode colocar a variável products no $rootScope", "Mas eu te aconselho a usar o ui-router para fazer a passagem de parâmetros". Poder voce pode, mas eu aconselhei outra saida.
    – MarioAleo
    Commented 18/04/2017 às 14:00
0

Boas,

No meu entender o aconselhável é criares uma factory para a data, que será um Objecto, onde podes encapsular a data e respectivos métodos. Depois é só chamar as propriedades que necessitares nos controllers.

Está aqui o exemplo neste 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;}
    });
  }
 };
});

No controller que acessa ao routerParams chamas o método filterById().

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

No segundo controller é só declarar o result ou se necessário até podes filtrar novamente com um novo id.

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

Desta forma limpas os controllers, e tudo o que for relativo a essa data pode ser alcançado nos controllers e directives fácilmente.

Ou terás a opção do $rootScope, que também funciona para o que pretendes.

Acerca dos routers, aconselho-te a dares uma olhadela ao ui-router, uma ferramenta muito superior no meu entender.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .