Daten zwischen Controllern in Angular JS übertragen?

Ich habe einen Basis-Controller, der meine Produkte anzeigt.

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

Aus meiner Sicht zeige ich diese Produkte in einer Liste an

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

Ich versuche zu tun, wenn jemand auf den Produktnamen klickt, ich habe eine andere Ansicht namens Warenkorb, in der dieses Produkt hinzugefügt wird.

 <ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

Mein Zweifel hier ist also, wie diese angeklickten Produkte vom ersten Controller zum zweiten weitergegeben werden können. Ich ging davon aus, dass Cart auch ein Controller sein sollte.

Ich behandle Klickereignisse mit Direktiven. Ich denke auch, ich sollte den Service nutzen, um die oben genannten Funktionen zu erreichen. Kannst du nicht herausfinden, wie? Da der Warenkorb vordefiniert ist, kann die Anzahl der hinzugefügten Produkte je nach Seitenbenutzer 5/10 betragen. Also möchte ich dieses Generikum behalten.

Aktualisieren:

Ich habe einen Dienst zum Senden erstellt und im zweiten Controller erhalte ich ihn. Die Frage ist nun, wie ich dom aktualisiere. Da meine Liste zum Löschen von Produkten ziemlich fest codiert ist.

Aus der Beschreibung geht hervor, dass Sie einen Dienst verwenden sollten. Unter http://egghead.io/lessons/angularjs-sharing-data-between-controllers und AngularJS Service Passing Data zwischen Controllern finden Sie einige Beispiele.

Sie können Ihren Produktservice (als Fabrik) als solche definieren:

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Die Abhängigkeit injiziert den Dienst in beide Controller.

ProductControllerDefinieren Sie in Ihrer Aktion eine Aktion, mit der das ausgewählte Objekt dem Array hinzugefügt wird:

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

In Ihrem CartControllererhalten Sie die Produkte vom Service:

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});

Wie werden diese angeklickten Produkte vom ersten Controller an den zweiten übergeben?

Beim Klicken können Sie eine Methode aufrufen, die Broadcast aufruft :

$rootScope.$broadcast('SOME_TAG', 'your value');

und der zweite Controller hört dieses Tag wie folgt ab:

$scope.$on('SOME_TAG', function(response) {
      // ....
})

Da wir $ scope nicht in Services einfügen können, gibt es nichts Besseres als einen singleton $ scope.

Aber wir können spritzen $rootScope. Wenn Sie also Wert im Service speichern, können Sie ihn $rootScope.$broadcast('SOME_TAG', 'your value');im Service-Body ausführen . (Siehe @Charx Beschreibung der Dienste)

app.service('productService',  function($rootScope) {/*....*/}

Bitte lesen Sie einen guten Artikel über $ Broadcast , $ Emit

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 Teilen 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>

Sie können dies auf zwei Arten tun.

1. Durch die Verwendung $rootscope, aber ich empfehle dies nicht. Das $rootScopeist der oberste Bereich. Eine App kann nur eine $rootScopehaben, die von allen Komponenten einer App gemeinsam genutzt wird. Daher verhält es sich wie eine globale Variable.

2. Dienste nutzen. Sie können dies tun, indem Sie einen Dienst zwischen zwei Controllern teilen. Der Code für den Service kann folgendermaßen aussehen:

   app.service('shareDataService', function() {
       var myList = [];
   
       var addList = function(newObj) {
           myList.push(newObj);
       }
   
       var getList = function(){
           return myList;
       }
   
       return {
           addList: addList,
           getList: getList
       };
   });

   Sie können meine Geige hier sehen .

Eine noch einfachere Möglichkeit, die Daten zwischen Controllern auszutauschen, ist die Verwendung verschachtelter Datenstrukturen. Anstelle von zum Beispiel

$scope.customer = {};

wir können benutzen

$scope.data = { customer: {} };

Die dataEigenschaft wird vom übergeordneten Bereich geerbt, damit wir ihre Felder überschreiben und den Zugriff von anderen Controllern beibehalten können.

angular.module('testAppControllers', [])
    .controller('ctrlOne', function ($scope) {
        $scope.$broadcast('test');
    })
    .controller('ctrlTwo', function ($scope) {
        $scope.$on('test', function() {
        });
    });

Wir können Daten in einer Sitzung speichern und sie überall in unserem Programm verwenden.

$window.sessionStorage.setItem("Mydata",data);

Anderer Ort

$scope.data = $window.sessionStorage.getItem("Mydata");

Ich habe die Antworten hier gesehen und es beantwortet die Frage des Datenaustauschs zwischen Controllern. Aber was soll ich tun, wenn ein Controller den anderen über die Tatsache informieren soll, dass die Daten geändert wurden (ohne Broadcast zu verwenden)? EINFACH! Nur mit dem berühmten Besuchermuster:

myApp.service('myService', function() {

    var visitors = [];

    var registerVisitor = function (visitor) {
        visitors.push(visitor);
    }

    var notifyAll = function() {
        for (var index = 0; index < visitors.length; ++index)
            visitors[index].visit();
    }

    var myData = ["some", "list", "of", "data"];

    var setData = function (newData) {
        myData = newData;
        notifyAll();
    }

    var getData = function () {
        return myData;
    }

    return {
        registerVisitor: registerVisitor,
        setData: setData,
        getData: getData
    };
}

myApp.controller('firstController', ['$scope', 'myService',
    function firstController($scope, myService) {

        var setData = function (data) {
            myService.setData(data);
        }

    }
]);

myApp.controller('secondController', ['$scope', 'myService',
    function secondController($scope, myService) {

        myService.registerVisitor(this);

        this.visit = function () {
            $scope.data = myService.getData();
        }

        $scope.data = myService.getData();
    }
]);

Auf diese einfache Weise kann ein Controller einen anderen Controller aktualisieren, wenn einige Daten aktualisiert wurden.

Ich habe eine Factory erstellt, die den gemeinsamen Bereich zwischen dem Muster des Routenpfads steuert, sodass Sie die freigegebenen Daten nur dann verwalten können, wenn Benutzer im gleichen übergeordneten Routenpfad navigieren.

.controller('CadastroController', ['$scope', 'RouteSharedScope',
    function($scope, routeSharedScope) {
      var customerScope = routeSharedScope.scopeFor('/Customer');
      //var indexScope = routeSharedScope.scopeFor('/');
    }
 ])

Wenn der Benutzer zu einem anderen Routenpfad wechselt, z. B. '/ Support', werden die freigegebenen Daten für den Pfad '/ Kunde' automatisch zerstört. Wenn der Benutzer stattdessen zu "untergeordneten" Pfaden wie "/ Customer / 1" oder "/ Customer / list" wechselt, wird der Bereich nicht zerstört.

Ein Beispiel finden Sie hier: http://plnkr.co/edit/OL8of9

1

using $localStorage

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

2

Beim Klicken können Sie eine Methode aufrufen, die Broadcast aufruft:

$rootScope.$broadcast('SOME_TAG', 'your value');

and the second controller will listen on this tag like:
$scope.$on('SOME_TAG', function(response) {
      // ....
})

3

using $rootScope:

4

window.sessionStorage.setItem("Mydata",data);
$scope.data = $window.sessionStorage.getItem("Mydata");

5

Ein Weg mit Winkelservice:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});

app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});

Erstellen Sie eine Factory in Ihrem Modul und fügen Sie eine Referenz der Factory in der Steuerung hinzu. Verwenden Sie deren Variablen in der Steuerung. Ermitteln Sie jetzt den Wert der Daten in einer anderen Steuerung, indem Sie eine Referenz hinzufügen, wo immer Sie möchten

Ich weiß nicht, ob es jemandem helfen wird, aber basierend auf der Antwort von Charx (danke!) Habe ich einen einfachen Cache-Service erstellt. Fühlen Sie sich frei zu verwenden, zu remixen und zu teilen:

angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});

Ein Weg mit Winkelservice:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});


app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});



<div ng-app='home'>

<div ng-controller='one'>
  Type in text: 
  <input type='text' ng-model="inputText.o"/>
</div>
<br />

<div ng-controller='two'>
  Type in text:
  <input type='text' ng-model="inputTextTwo.o"/>
</div>

</div>

https://jsfiddle.net/1w64222q/

Zu Ihrer Information Das $ scope-Objekt hat die $ emit, $ Broadcast, $ on UND Das $ rootScope-Objekt hat die identische $ emit, $ Broadcast, $ on

Lesen Sie mehr über Publish / Subscribe - Musterentwurf in Winkel hier

Um die von @Maxim vorgeschlagene Lösung mithilfe von $ Broadcast zu verbessern, ändern sich die Sendedaten nicht

$rootScope.$broadcast('SOME_TAG', 'my variable');

aber auf Daten zu hören

$scope.$on('SOME_TAG', function(event, args) {
    console.log("My variable is", args);// args is value of your variable
})

Es gibt drei Möglichkeiten, dies zu tun:

a) Nutzung eines Dienstes

b) Ausnutzen der abhängigen Eltern / Kind-Beziehung zwischen Controller-Bereichen.

c) In Angular 2.0 werden die Daten mit dem Schlüsselwort "As" von einem Controller an einen anderen übergeben.

Weitere Informationen mit Beispiel finden Sie unter folgendem Link:

http://www.tutespace.com/2016/03/angular-js.html

var custApp = angular.module("custApp", [])
.controller('FirstController', FirstController)
.controller('SecondController',SecondController)
.service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
this.data = sharedData.data;
}

SecondController.$inject['sharedData'];
function SecondController(sharedData) {
this.data = sharedData.data;
}

function SharedData() {
this.data = {
    value: 'default Value'
}
}

Erster Controller

<div ng-controller="FirstController as vm">
<input type=text ng-model="vm.data.value" />
</div>

Zweiter Controller

 <div ng-controller="SecondController as vm">
    Second Controller<br>
    {{vm.data.value}}
</div>

Ich denke, die

bester Weg

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

Ihr cardController wird sein

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

Sie können auch hinzufügen

if($localStorage.selectedObj){
    $scope.selectedProducts = $localStorage.selectedObj;
}else{
    //redirect to select product using $location.url('/select-product')
}