AngularJS: Como posso passar variáveis ​​entre controladores?

Eu tenho dois controladores angulares:

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

Não posso usar por Ctrl1dentro Ctrl2porque é indefinido. No entanto, se eu tentar passar assim ...

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

Eu recebo um erro. Alguém sabe como fazer isso?

Fazendo

Ctrl2.prototype = new Ctrl1();

Também falha.

NOTA: Esses controladores não estão aninhados um no outro.

Uma maneira de compartilhar variáveis ​​entre vários controladores é criar um serviço e injetá-lo em qualquer controlador em que você deseja usá-lo.

Exemplo simples de serviço:

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var property = 'First';

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

Usando o serviço em um controlador:

function Ctrl2($scope, sharedProperties) {
    $scope.prop2 = "Second";
    $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

Isso é descrito muito bem neste blog (lição 2 e em particular).

Descobri que se você deseja vincular a essas propriedades em vários controladores, funcionará melhor se você vincular à propriedade de um objeto em vez de um tipo primitivo (booleano, string, número) para manter a referência vinculada.

Exemplo: em var property = { Property1: 'First' };vez de var property = 'First';.

ATUALIZAÇÃO: Para (espero) tornar as coisas mais claras, aqui está um violino que mostra um exemplo de:

• Vinculação a cópias estáticas do valor compartilhado (em myController1)
  • Ligação a uma primitiva (sequência)
  • Vinculação à propriedade de um objeto (salva em uma variável de escopo)
• Vinculação a valores compartilhados que atualizam a interface do usuário à medida que os valores são atualizados (em myController2)
  • Vinculação a uma função que retorna uma primitiva (string)
  • Vinculação à propriedade do objeto
  • Associação bidirecional à propriedade de um objeto

Eu gosto de ilustrar coisas simples com exemplos simples :)

Aqui está um Serviceexemplo muito simples :

angular.module('toDo',[])

.service('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

E aqui o jsbin

E aqui está um Factoryexemplo muito simples :

angular.module('toDo',[])

.factory('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  return {
    dataObj: _dataObj
  };
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

E aqui o jsbin

Se isso é muito simples, aqui está um exemplo mais sofisticado

Consulte também a resposta aqui para comentários relacionados a práticas recomendadas

--- Eu sei que esta resposta não é para esta pergunta, mas quero que as pessoas que leem essa pergunta e queiram lidar com serviços como fábricas evitem problemas ao fazer isso ----

Para isso, você precisará usar um Serviço ou uma Fábrica.

Os serviços são a MELHOR PRÁTICA para compartilhar dados entre controladores não aninhados.

Uma anotação muito boa sobre esse tópico sobre compartilhamento de dados é como declarar objetos. Tive azar porque caí em uma armadilha do AngularJS antes de ler sobre isso e fiquei muito frustrado. Então, deixe-me ajudá-lo a evitar esse problema.

Eu li no "ng-book: O livro completo sobre o AngularJS" que os modelos ng do AngularJS criados nos controladores como dados nus estão ERRADOS!

Um elemento $ scope deve ser criado assim:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // best practice, always use a model
  $scope.someModel = {
    someValue: 'hello computer'
  });

E não é assim:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // anti-pattern, bare value
  $scope.someBareValue = 'hello computer';
  };
});

Isso ocorre porque é recomendado (BEST PRACTICE) para o DOM (documento html) conter as chamadas como

<div ng-model="someModel.someValue"></div>  //NOTICE THE DOT.

Isso é muito útil para controladores aninhados se você desejar que seu controlador filho possa alterar um objeto do controlador pai ....

Porém, no seu caso, você não deseja escopos aninhados, mas há um aspecto semelhante para obter objetos dos serviços para os controladores.

Digamos que você tenha o seu serviço 'Factory' e, no espaço de retorno, existe um objetoA que contém o objetoB que contém o objetoC.

Se do seu controlador você deseja colocar o objetoC no seu escopo, é um erro dizer:

$scope.neededObjectInController = Factory.objectA.objectB.objectC;

Isso não vai funcionar ... Em vez disso, use apenas um ponto.

$scope.neededObjectInController = Factory.ObjectA;

Em seguida, no DOM, você pode chamar objectC a partir de objectA. Essa é uma prática recomendada relacionada às fábricas e, o mais importante, ajudará a evitar erros inesperados e não alcançáveis.

Solução sem criar Serviço, usando $ rootScope:

Para compartilhar propriedades entre os Controladores de aplicativos, você pode usar Angular $ rootScope. Essa é outra opção para compartilhar dados, colocando-os para que as pessoas saibam sobre eles.

A maneira preferida de compartilhar alguma funcionalidade entre os Controladores é Serviços, para ler ou alterar uma propriedade global, você pode usar $ rootscope.

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

Usando $ rootScope em um modelo (acesse as propriedades com $ root):

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

A amostra acima funcionou como um encanto. Fiz uma modificação apenas no caso de precisar gerenciar vários valores. Eu espero que isso ajude!

app.service('sharedProperties', function () {

    var hashtable = {};

    return {
        setValue: function (key, value) {
            hashtable[key] = value;
        },
        getValue: function (key) {
            return hashtable[key];
        }
    }
});

Eu costumo usar valores, feliz por qualquer um discutir por que essa é uma má idéia.

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

myApp.value('sharedProperties', {}); //set to empty object - 

Injete o valor de acordo com um serviço.

Definido em ctrl1:

myApp.controller('ctrl1', function DemoController(sharedProperties) {
  sharedProperties.carModel = "Galaxy";
  sharedProperties.carMake = "Ford";
});

e acesso a partir de ctrl2:

myApp.controller('ctrl2', function DemoController(sharedProperties) {
  this.car = sharedProperties.carModel + sharedProperties.carMake; 

});

O exemplo a seguir mostra como passar variáveis ​​entre controladores irmãos e executar uma ação quando o valor for alterado.

Exemplo de caso de uso: você tem um filtro em uma barra lateral que altera o conteúdo de outra visualização.

angular.module('myApp', [])

  .factory('MyService', function() {

    // private
    var value = 0;

    // public
    return {
      
      getValue: function() {
        return value;
      },
      
      setValue: function(val) {
        value = val;
      }
      
    };
  })
  
  .controller('Ctrl1', function($scope, $rootScope, MyService) {

    $scope.update = function() {
      MyService.setValue($scope.value);
      $rootScope.$broadcast('increment-value-event');
    };
  })
  
  .controller('Ctrl2', function($scope, MyService) {

    $scope.value = MyService.getValue();

    $scope.$on('increment-value-event', function() {    
      $scope.value = MyService.getValue();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  
  <h3>Controller 1 Scope</h3>
  <div ng-controller="Ctrl1">
    <input type="text" ng-model="value"/>
    <button ng-click="update()">Update</button>
  </div>
  
  <hr>
  
  <h3>Controller 2 Scope</h3>
  <div ng-controller="Ctrl2">
    Value: {{ value }}
  </div>  

</div>

Eu gostaria de contribuir para essa pergunta, salientando que a maneira recomendada de compartilhar dados entre controladores e até diretivas é usando serviços (fábricas), como já foi apontado, mas também gostaria de fornecer um exemplo prático de como fazer isso.

Aqui está o plunker de trabalho: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Primeiro, crie seu serviço , que terá seus dados compartilhados :

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

Em seguida, basta injetar nos controladores e pegar os dados compartilhados no seu escopo:

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('SecondCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('MainCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

Você também pode fazer isso pelas suas diretivas , da mesma maneira:

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

Espero que esta resposta prática e limpa possa ser útil para alguém.

Você poderia fazer isso com serviços ou fábricas. Eles são essencialmente os mesmos para algumas diferenças principais. Eu achei essa explicação no thinkster.io a mais fácil de seguir. Simples, direto ao ponto e eficaz.

Você também não poderia tornar a propriedade parte do pai dos escopos?

$scope.$parent.property = somevalue;

Não estou dizendo que está certo, mas funciona.

Ah, tenha um pouco desse material novo como outra alternativa. É o armazenamento local e funciona onde o angular funciona. De nada. (Mas sério, obrigado o cara)

https://github.com/gsklee/ngStorage

Defina seus padrões:

$scope.$storage = $localStorage.$default({
    prop1: 'First',
    prop2: 'Second'
});

Acesse os valores:

$scope.prop1 = $localStorage.prop1;
$scope.prop2 = $localStorage.prop2;

Armazene os valores

$localStorage.prop1 = $scope.prop1;
$localStorage.prop2 = $scope.prop2;

Lembre-se de injetar ngStorage no seu aplicativo e $ localStorage no seu controlador.

Existem duas maneiras de fazer isso

1) Use o serviço de obtenção / configuração

2) $scope.$emit('key', {data: value}); //to set the value

 $rootScope.$on('key', function (event, data) {}); // to get the value

Segunda Abordagem:

angular.module('myApp', [])
  .controller('Ctrl1', ['$scope',
    function($scope) {

    $scope.prop1 = "First";

    $scope.clickFunction = function() {
      $scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
    };
   }
])
.controller('Ctrl2', ['$scope',
    function($scope) {
      $scope.prop2 = "Second";

        $scope.$on("update_Ctrl2_controller", function(event, prop) {
        $scope.prop = prop;

        $scope.both = prop + $scope.prop2; 
    });
  }
])

Html:

<div ng-controller="Ctrl2">
  <p>{{both}}</p>
</div>

<button ng-click="clickFunction()">Click</button>

Para mais detalhes, consulte plunker:

http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview

Se você não deseja prestar serviços de manutenção, pode fazer assim.

var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;

Além de $ rootScope e serviços, há uma solução alternativa limpa e fácil de estender angular para adicionar os dados compartilhados:

nos controladores:

angular.sharedProperties = angular.sharedProperties 
    || angular.extend(the-properties-objects);

Essas propriedades pertencem ao objeto 'angular', separado dos escopos, e podem ser compartilhadas em escopos e serviços.

Um benefício é que você não precisa injetar o objeto: eles são acessíveis em qualquer lugar imediatamente após a sua definição!