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

Ah, nehmen Sie ein bisschen von diesem neuen Zeug als weitere Alternative. Es ist localstorage, und funktioniert, wo Angular funktioniert. Sie sind willkommen. (Aber wirklich, danken Sie dem Kerl)

https://github.com/gsklee/ngStorage

Definieren Sie Ihre Standardwerte:

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

Zugriff auf die Werte:

$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 zu injizieren.

Answer 2

Es gibt zwei Möglichkeiten, dies zu tun

1) Dienst get/set verwenden

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

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

Answer 3

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

---

H

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

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

Für weitere Einzelheiten siehe plunker :

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

Answer 4

Ich habe die obigen Antworten durchgesehen und empfehle den Vorschlag von pejman vom 29. Dezember '16 um 13:31 Uhr, aber er/sie hat keine vollständige Antwort hinterlassen. Hier ist es, ich werde es so formulieren --> (Sie brauchen einen Dienst und einen Hörer $Uhr auf einem der Bereiche von Controllern für Änderungen im Servicebereich)

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

app.service('bridgeService', function () {
    var msg = ""; 
    return msg;
});
app.controller('CTRL_1'
, function ($scope, $http, bridgeService) 
{
    $http.get(_restApi, config)
    .success(
    function (serverdata, status, config) {
        $scope.scope1Box = bridgeService.msg = serverdata;
    });
});
app.controller('CTRL_2'
, function ($scope, $http, bridgeService) 
{
    $scope.$watch( function () {
        return (bridgeService.msg);
    }, function (newVal, oldVal) {
        $scope.scope2Box = newVal;
    }, true
    );
});

Answer 5

Wenn Sie keinen Dienst machen wollen, können Sie das so machen.

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