AngularJS: ¿Cómo puedo pasar variables entre controladores?

Tengo dos 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
}

No puedo usar Ctrl1adentro Ctrl2porque no está definido. Sin embargo, si trato de pasarlo así ...

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

Me sale un error ¿Alguien sabe como hacer esto?

Haciendo

Ctrl2.prototype = new Ctrl1();

También falla

NOTA: Estos controladores no están anidados uno dentro del otro.

Una forma de compartir variables entre varios controladores es crear un servicio e inyectarlo en cualquier controlador donde desee usarlo.

Ejemplo de servicio simple:

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

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

Usando el servicio en un controlador:

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

Esto se describe muy bien en este blog (Lección 2 y más en particular).

Descubrí que si desea enlazar estas propiedades a través de múltiples controladores, funciona mejor si se une a la propiedad de un objeto en lugar de un tipo primitivo (booleano, cadena, número) para retener la referencia enlazada.

Ejemplo: en var property = { Property1: 'First' };lugar de var property = 'First';.

ACTUALIZACIÓN: Para (con suerte) aclarar las cosas aquí, hay un violín que muestra un ejemplo de:

• Enlace a copias estáticas del valor compartido (en myController1)
  • Enlace a una primitiva (cadena)
  • Enlace a la propiedad de un objeto (guardado en una variable de alcance)
• Enlace a valores compartidos que actualizan la IU a medida que se actualizan los valores (en myController2)
  • Enlace a una función que devuelve una primitiva (cadena)
  • Enlace a la propiedad del objeto
  • Enlace bidireccional a la propiedad de un objeto

Me gusta ilustrar cosas simples con ejemplos simples :)

Aquí hay un Serviceejemplo muy simple :

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

Y aqui el jsbin

Y aquí hay un Factoryejemplo muy simple :

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

Y aqui el jsbin

Si eso es demasiado simple, aquí hay un ejemplo más sofisticado

Consulte también la respuesta aquí para ver los comentarios relacionados con las mejores prácticas.

--- Sé que esta respuesta no es para esta pregunta, pero quiero personas que lean esta pregunta y quieran manejar Servicios como Fábricas para evitar problemas al hacer esto ----

Para ello, deberá utilizar un Servicio o una Fábrica.

Los servicios son la MEJOR PRÁCTICA para compartir datos entre controladores no anidados.

Una muy buena anotación sobre este tema sobre el intercambio de datos es cómo declarar objetos. Tuve mala suerte porque caí en una trampa AngularJS antes de leer sobre eso, y estaba muy frustrado. Déjame ayudarte a evitar este problema.

Leí del "ng-book: El libro completo sobre AngularJS" que los modelos ng de AngularJS que se crean en controladores como datos desnudos ¡ESTÁN INCORRECTOS!

Se debe crear un elemento $ scope así:

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

Y no así:

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

Esto se debe a que se recomienda (MEJOR PRÁCTICA) que el DOM (documento html) contenga las llamadas como

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

Esto es muy útil para los controladores anidados si desea que su controlador secundario pueda cambiar un objeto desde el controlador principal ...

Pero en su caso no desea ámbitos anidados, pero hay un aspecto similar para obtener objetos de los servicios a los controladores.

Digamos que tiene su servicio 'Factory' y en el espacio de retorno hay un objeto A que contiene un objeto B que contiene un objeto C.

Si desde su controlador desea OBTENER el objectC en su alcance, es un error decir:

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

Eso no funcionará ... En su lugar, use solo un punto.

$scope.neededObjectInController = Factory.ObjectA;

Luego, en el DOM puede llamar a objectC desde objectA. Esta es una práctica recomendada relacionada con las fábricas y, lo más importante, ayudará a evitar errores inesperados y no detectables.

Solución sin crear Servicio, usando $ rootScope:

Para compartir propiedades entre los Controladores de aplicaciones, puede usar Angular $ rootScope. Esta es otra opción para compartir datos, para que la gente lo sepa.

La forma preferida de compartir algunas funciones entre los Controladores es Servicios, para leer o cambiar una propiedad global puede 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 en una plantilla (Propiedades de acceso con $ root):

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

La muestra anterior funcionó a las mil maravillas. Acabo de hacer una modificación en caso de que necesite administrar varios valores. ¡Espero que esto ayude!

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

    var hashtable = {};

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

Tiendo a usar valores, me alegra que alguien discuta por qué es una mala idea.

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

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

Luego inyecte el valor según un servicio.

Establecer en ctrl1:

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

y acceso desde ctrl2:

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

});

El siguiente ejemplo muestra cómo pasar variables entre controladores hermanos y realizar una acción cuando el valor cambia.

Ejemplo de caso de uso: tiene un filtro en una barra lateral que cambia el contenido de otra vista.

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>

Me gustaría contribuir a esta pregunta señalando que la forma recomendada de compartir datos entre los controladores, e incluso las directivas, es mediante el uso de servicios (fábricas) como ya se ha señalado, pero también me gustaría proporcionar un Ejemplo práctico de trabajo de cómo hacerlo.

Aquí está el plunker de trabajo: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Primero, cree su servicio , que tendrá sus datos compartidos :

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

Luego, simplemente inyecte en sus controladores y tome los datos compartidos en su alcance:

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

También puede hacerlo para sus directivas , funciona de la misma manera:

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 respuesta práctica y limpia pueda ser útil para alguien.

Podrías hacerlo con servicios o fábricas. Son esencialmente iguales, aparte de algunas diferencias centrales. Encontré esta explicación en thinkster.io como la más fácil de seguir. Simple, directo y efectivo.

¿No podría también hacer que la propiedad sea parte de los ámbitos primarios?

$scope.$parent.property = somevalue;

No digo que sea correcto, pero funciona.

Ah, tenga un poco de estas cosas nuevas como otra alternativa. Es almacenamiento local y funciona donde funciona angular. De nada. (Pero realmente, gracias al chico)

https://github.com/gsklee/ngStorage

Defina sus valores predeterminados:

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

Acceda a los valores:

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

Almacenar los valores

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

Recuerde inyectar ngStorage en su aplicación y $ localStorage en su controlador.

Hay dos maneras de hacer esto

1) Use el servicio get / set

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

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

Segundo enfoque

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 más detalles ver plunker:

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

Si no desea hacer el servicio, puede hacerlo así.

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

Además de $ rootScope y los servicios, hay una solución alternativa limpia y fácil de extender angular para agregar los datos compartidos:

en los controladores:

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

Estas propiedades pertenecen al objeto 'angular', separado de los ámbitos, y se pueden compartir en ámbitos y servicios.

Uno de los beneficios es que no tiene que inyectar el objeto: ¡son accesibles desde cualquier lugar inmediatamente después de su definición!