AngularJS: Wie kann ich Variablen zwischen Controllern übergeben?

Ich habe zwei Angular Controller:

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
}

Ich kann nicht Ctrl1drinnen verwenden, Ctrl2weil es undefiniert ist. Wenn ich es jedoch so weitergebe ...

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

Ich bekomme eine Fehlermeldung. Weiß jemand, wie man das macht?

Tun

Ctrl2.prototype = new Ctrl1();

Scheitert auch.

HINWEIS: Diese Controller sind nicht ineinander verschachtelt.

Eine Möglichkeit, Variablen für mehrere Controller freizugeben, besteht darin , einen Dienst zu erstellen und ihn in einen beliebigen Controller einzufügen, in dem Sie ihn verwenden möchten.

Einfaches Servicebeispiel:

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

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

Verwenden des Dienstes in einer Steuerung:

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

Dies wird in diesem Blog sehr gut beschrieben (Lektion 2 und insbesondere weiter).

Ich habe festgestellt, dass es besser funktioniert, wenn Sie über mehrere Controller hinweg an diese Eigenschaften binden möchten, wenn Sie an die Eigenschaft eines Objekts binden, anstatt an einen primitiven Typ (Boolescher Wert, Zeichenfolge, Zahl), um die gebundene Referenz beizubehalten.

Beispiel: var property = { Property1: 'First' };statt var property = 'First';.

UPDATE: Um (hoffentlich) die Dinge hier klarer zu machen, gibt es eine Geige , die ein Beispiel zeigt für:

• Bindung an statische Kopien des gemeinsam genutzten Werts (in myController1)
  • Bindung an ein Grundelement (Zeichenfolge)
  • Bindung an die Eigenschaft eines Objekts (in einer Bereichsvariablen gespeichert)
• Bindung an gemeinsam genutzte Werte, die die Benutzeroberfläche aktualisieren, wenn die Werte aktualisiert werden (in myController2)
  • Bindung an eine Funktion, die ein Grundelement (Zeichenfolge) zurückgibt
  • Bindung an die Objekteigenschaft
  • Zwei-Wege-Bindung an die Eigenschaft eines Objekts

Ich illustriere gerne einfache Dinge anhand einfacher Beispiele :)

Hier ist ein sehr einfaches ServiceBeispiel:

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

Und hier der jsbin

Und hier ist ein sehr einfaches FactoryBeispiel:

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

Und hier der jsbin

Wenn das zu einfach ist, finden Sie hier ein komplexeres Beispiel

In der Antwort finden Sie auch Kommentare zu verwandten Best Practices

--- Ich weiß, dass diese Antwort nicht für diese Frage ist, aber ich möchte, dass Leute, die diese Frage lesen und mit Diensten wie Fabriken umgehen, Probleme damit vermeiden ----

Dazu müssen Sie einen Service oder eine Fabrik nutzen.

Die Dienste sind die BESTE PRAXIS , um Daten zwischen nicht verschachtelten Controllern auszutauschen .

Eine sehr sehr gute Anmerkung zu diesem Thema über die gemeinsame Nutzung von Daten ist das Deklarieren von Objekten. Ich hatte Pech, weil ich in eine AngularJS-Falle geraten bin, bevor ich darüber gelesen habe, und ich war sehr frustriert. Lassen Sie mich Ihnen helfen, diese Probleme zu vermeiden.

Ich habe aus dem "ng-book: Das komplette Buch über AngularJS" gelesen, dass AngularJS ng-Modelle, die in Controllern als Bare-Data erstellt werden, FALSCH sind!

Ein $ scope-Element sollte folgendermaßen erstellt werden:

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

Und nicht so:

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

Dies liegt daran, dass empfohlen wird (BEST PRACTICE), dass das DOM (HTML-Dokument) die Aufrufe als enthält

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

Dies ist für verschachtelte Controller sehr hilfreich, wenn Sie möchten, dass Ihr untergeordneter Controller ein Objekt vom übergeordneten Controller ändern kann.

In Ihrem Fall möchten Sie jedoch keine verschachtelten Bereiche, aber es gibt einen ähnlichen Aspekt, um Objekte von Diensten an die Controller zu übertragen.

Nehmen wir an, Sie haben Ihren Service 'Factory' und im Rückgabebereich befindet sich ein ObjektA, das ObjektB enthält, das ObjektC enthält.

Wenn Sie von Ihrem Controller aus das Objekt C in Ihren Bereich holen möchten, ist es ein Fehler zu sagen:

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

Das wird nicht funktionieren ... Verwenden Sie stattdessen nur einen Punkt.

$scope.neededObjectInController = Factory.ObjectA;

Anschließend können Sie im DOM objectC von objectA aus aufrufen. Dies ist eine bewährte Methode für Fabriken und hilft vor allem dabei, unerwartete und nicht auffindbare Fehler zu vermeiden.

Lösung ohne Service zu erstellen, mit $ rootScope:

Um Eigenschaften für App-Controller freizugeben, können Sie Angular $ rootScope verwenden. Dies ist eine weitere Option zum Freigeben von Daten, damit die Benutzer davon erfahren.

Die bevorzugte Methode zum Teilen einiger Funktionen zwischen Controllern ist Services, um eine globale Eigenschaft zu lesen oder zu ändern, die Sie mit $ rootcope verwenden können.

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

Verwenden von $ rootScope in einer Vorlage (Zugriffseigenschaften mit $ root):

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

Das obige Beispiel hat wie ein Zauber gewirkt. Ich habe gerade eine Änderung vorgenommen, nur für den Fall, dass ich mehrere Werte verwalten muss. Ich hoffe das hilft!

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

    var hashtable = {};

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

Ich neige dazu, Werte zu verwenden, und freue mich, wenn jemand darüber spricht, warum dies eine schlechte Idee ist.

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

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

Fügen Sie dann den Wert gemäß einem Dienst ein.

In Strg1 einstellen:

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

und Zugriff von Strg2:

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

});

Das folgende Beispiel zeigt, wie Variablen zwischen Geschwister- Controllern und übergeben werden eine Aktion ausgeführt werden, wenn sich der Wert ändert.

Anwendungsfallbeispiel: Sie haben einen Filter in einer Seitenleiste, der den Inhalt einer anderen Ansicht ändert.

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>

Ich möchte zu dieser Frage beitragen, indem ich darauf hinweise, dass die empfohlene Methode zum Austausch von Daten zwischen Controllern und sogar Direktiven darin besteht, Dienste (Fabriken) zu verwenden, wie bereits erwähnt, aber ich möchte auch eine praktisches Beispiel dafür, wie das gemacht werden sollte.

Hier ist der funktionierende Plunker: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Zuerst erstellen Sie Ihre Service , dass Ihr haben gemeinsam genutzter Daten :

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

Fügen Sie es dann einfach in Ihre Controller ein und greifen Sie auf die freigegebenen Daten in Ihrem Bereich zu:

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

Sie können dies auch für Ihre Anweisungen tun. Dies funktioniert auf die gleiche Weise:

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

Hoffe, diese praktische und saubere Antwort kann jemandem helfen.

Sie könnten das mit Dienstleistungen oder Fabriken tun. Sie sind für einige Kernunterschiede im Wesentlichen gleich. Ich fand diese Erklärung auf thinkster.io am einfachsten zu befolgen. Einfach, auf den Punkt und effektiv.

Könnten Sie die Eigenschaft nicht auch Teil des übergeordneten Bereichs machen?

$scope.$parent.property = somevalue;

Ich sage nicht, dass es richtig ist, aber es funktioniert.

Ah, haben Sie ein bisschen von diesem neuen Zeug als eine andere Alternative. Es ist ein lokaler Speicher und funktioniert dort, wo eckig funktioniert. Bitte. (Aber wirklich, danke dem Kerl)

https://github.com/gsklee/ngStorage

Definieren Sie Ihre Standardeinstellungen:

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

Greifen Sie auf die Werte zu:

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

Speichern Sie die Werte

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

Denken Sie daran, ngStorage in Ihre App und $ localStorage in Ihren Controller einzufügen.

Es gibt zwei Möglichkeiten, dies zu tun

1) Verwenden Sie den get / set-Dienst

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

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

Zweiter Ansatz:

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>

Für weitere Details siehe Plunker:

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

Wenn Sie keinen Service erbringen möchten, können Sie dies tun.

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

Neben $ rootScope und Services gibt es eine saubere und einfache alternative Lösung, um Angular zu erweitern und die gemeinsam genutzten Daten hinzuzufügen:

in den Controllern:

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

Diese Eigenschaften gehören zu einem 'Winkel'-Objekt, das von den Bereichen getrennt ist, und können in Bereichen und Diensten gemeinsam genutzt werden.

1 Vorteil davon, dass Sie das Objekt nicht injizieren müssen: Sie sind unmittelbar nach Ihrer Definition überall zugänglich!