AngularJS: Come posso passare le variabili tra i controller?

Ho due controller angolari:

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
}

Non posso usare Ctrl1dentro Ctrl2perché non è definito. Tuttavia, se provo a passarlo in questo modo ...

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

Ho ricevuto un errore Qualcuno sa come fare questo?

fare

Ctrl2.prototype = new Ctrl1();

Inoltre fallisce.

NOTA: questi controller non sono nidificati l'uno dentro l'altro.

Un modo per condividere variabili tra più controller è quello di creare un servizio e iniettarlo in qualsiasi controller in cui si desidera utilizzarlo.

Esempio di servizio semplice:

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

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

Utilizzo del servizio in un controller:

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

Questo è descritto molto bene in questo blog (lezione 2 e in particolare).

Ho scoperto che se si desidera associare queste proprietà su più controller funziona meglio se si associa alla proprietà di un oggetto invece di un tipo primitivo (booleano, stringa, numero) per conservare il riferimento associato.

Esempio: var property = { Property1: 'First' };anziché var property = 'First';.

AGGIORNAMENTO: Per (si spera) chiarire le cose, ecco un violino che mostra un esempio di:

• Binding a copie statiche del valore condiviso (in myController1)
  • Associazione a una primitiva (stringa)
  • Binding alla proprietà di un oggetto (salvato in una variabile scope)
• Associazione a valori condivisi che aggiornano l'interfaccia utente quando i valori vengono aggiornati (in myController2)
  • Associazione a una funzione che restituisce una primitiva (stringa)
  • Legando alla proprietà dell'oggetto
  • Associazione bidirezionale alla proprietà di un oggetto

Mi piace illustrare cose semplici con semplici esempi :)

Ecco un Serviceesempio molto semplice :

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 qui il jsbin

Ed ecco un Factoryesempio molto semplice :

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 qui il jsbin

Se è troppo semplice, ecco un esempio più sofisticato

Vedere anche la risposta qui per i commenti sulle migliori pratiche correlate

--- So che questa risposta non è per questa domanda, ma voglio che le persone che leggono questa domanda e vogliono gestire servizi come Fabbriche per evitare problemi a farlo ----

Per questo è necessario utilizzare un servizio o una fabbrica.

I servizi sono la PRATICA MIGLIORE per condividere i dati tra controller non nidificati.

Un'ottima annotazione su questo argomento sulla condivisione dei dati è come dichiarare gli oggetti. Sono stato sfortunato perché sono caduto in una trappola di AngularJS prima di leggerlo, ed ero molto frustrato. Quindi lascia che ti aiuti a evitare questo problema.

Ho letto dal "ng-book: il libro completo su AngularJS" che i modelli ng di AngularJS creati nei controller come dati non corretti sono SBAGLIATI!

Un elemento $ scope dovrebbe essere creato in questo modo:

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

E non così:

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

Questo perché si consiglia (BEST PRACTICE) che il DOM (documento html) contenga le chiamate come

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

Ciò è molto utile per i controller nidificati se si desidera che il controller figlio sia in grado di modificare un oggetto dal controller principale ....

Ma nel tuo caso non vuoi ambiti nidificati, ma c'è un aspetto simile per ottenere oggetti dai servizi ai controller.

Diciamo che hai il tuo servizio 'Factory' e nello spazio di ritorno c'è un oggetto A che contiene oggetto B che contiene oggettoC.

Se dal controller si desidera ottenere l'oggetto C nel proprio ambito, è un errore dire:

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

Non funzionerà ... Invece usa solo un punto.

$scope.neededObjectInController = Factory.ObjectA;

Quindi, nel DOM è possibile chiamare objectC da objectA. Questa è una best practice relativa alle fabbriche e, cosa più importante, contribuirà a evitare errori imprevisti e non irreparabili.

Soluzione senza creare servizio, usando $ rootScope:

Per condividere le proprietà tra i controller delle app puoi usare Angular $ rootScope. Questa è un'altra opzione per condividere i dati, mettendoli in modo che le persone ne siano a conoscenza.

Il modo preferito di condividere alcune funzionalità tra i controller è Servizi, per leggere o modificare una proprietà globale è possibile utilizzare $ 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;
}]);

Utilizzo di $ rootScope in un modello (accedere alle proprietà con $ root):

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

L'esempio sopra ha funzionato come un fascino. Ho appena fatto una modifica nel caso avessi bisogno di gestire più valori. Spero che aiuti!

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

    var hashtable = {};

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

Tendo a usare i valori, felice per chiunque di discutere sul perché questa è una cattiva idea ..

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

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

Quindi iniettare il valore secondo un servizio.

Imposta in ctrl1:

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

e accesso da ctrl2:

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

});

L'esempio seguente mostra come passare le variabili tra i controller dei fratelli e come agire quando il valore cambia.

Esempio di caso d'uso: in una barra laterale è presente un filtro che modifica il contenuto di un'altra 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>

Vorrei contribuire a questa domanda sottolineando che il modo raccomandato per condividere i dati tra i controller e persino le direttive è utilizzare i servizi (fabbriche) come è già stato sottolineato, ma vorrei anche fornire un esempio pratico funzionante di come farlo.

Ecco il plunker di lavoro: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Innanzitutto, crea il tuo servizio , che avrà i tuoi dati condivisi :

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

Quindi, basta iniettarlo sui controller e acquisire i dati condivisi sul proprio ambito:

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

Puoi anche farlo per le tue direttive , funziona allo stesso modo:

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

Spero che questa risposta pratica e chiara possa essere utile a qualcuno.

Potresti farlo con servizi o fabbriche. Sono essenzialmente gli stessi a parte per alcune differenze fondamentali. Ho trovato questa spiegazione su thinkster.io come la più facile da seguire. Semplice, al punto ed efficace.

Non potresti anche rendere la proprietà parte dell'ambito padre?

$scope.$parent.property = somevalue;

Non sto dicendo che è giusto ma funziona.

Ah, prendi un po 'di queste nuove cose come un'altra alternativa. È un archivio locale e funziona dove lavora angolare. Prego. (Ma davvero, grazie al ragazzo)

https://github.com/gsklee/ngStorage

Definisci le tue impostazioni predefinite:

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

Accedi ai valori:

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

Memorizza i valori

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

Ricorda di iniettare ngStorage nella tua app e $ localStorage nel controller.

Ci sono due modi per farlo

1) Utilizzare il servizio get / set

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

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

Secondo approccio:

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>

Per maggiori dettagli vedi plunker:

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

Se non si desidera fornire assistenza, è possibile farlo in questo modo.

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

Oltre a $ rootScope e ai servizi, esiste una soluzione alternativa semplice e chiara per estendere gli angoli per aggiungere i dati condivisi:

nei controller:

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

Queste proprietà appartengono all'oggetto "angolare", separato dagli ambiti e possono essere condivisi in ambiti e servizi.

1 vantaggio che non devi iniettare l'oggetto: sono accessibili ovunque immediatamente dopo la tua definizione!