AngularJS: Wie kann ich Variablen zwischen Controllern übergeben?

Question

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 verwenden Ctrl1 innerhalb Ctrl2 weil sie undefiniert ist. Wenn ich jedoch versuche, es wie folgt zu übergeben

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

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

Tun

Ctrl2.prototype = new Ctrl1();

Scheitert ebenfalls.

HINWEIS: Diese Steuerungen sind nicht ineinander verschachtelt.

Answer 1

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

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

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

Dann injizieren Sie den Wert wie bei einem Dienst.

In ctrl1 einstellen:

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

und Zugriff über ctrl2:

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

});

Answer 2

Das folgende Beispiel zeigt, wie man Variablen zwischen Geschwister Kontrolleure und eine Aktion durchführen, wenn sich der Wert ändert.

Beispiel für einen Anwendungsfall: 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>

Answer 3

Ich möchte zu dieser Frage beitragen, indem ich darauf hinweise, dass der empfohlene Weg zur gemeinsamen Nutzung von Daten zwischen den für die Verarbeitung Verantwortlichen und sogar den Richtlinien die Verwendung von Diensten (Fabriken) ist, wie bereits erwähnt wurde, aber ich möchte auch ein praktisches Beispiel dafür geben, wie dies geschehen sollte.

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

Erstens, erstellen. Ihr Dienstleistung , die Ihr gemeinsame Daten :

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

Dann injizieren Sie es einfach in Ihr Kontrolleure und greifen Sie auf die gemeinsamen 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 Direktiven funktioniert es 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>'
  }
}]);

Ich hoffe, dass diese praktische und saubere Antwort für jemanden hilfreich sein kann.

Answer 4

Das könnte man auch mit Dienstleistungen oder Fabriken machen. Sie sind im Wesentlichen dasselbe, abgesehen von einigen grundlegenden Unterschieden. Ich fand diese Erklärung auf thinkster.io am einfachsten zu befolgen ist. Einfach, auf den Punkt gebracht und effektiv.

Answer 5

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

$scope.$parent.property = somevalue;

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