javascript - update - retron 7




So übertragen Sie die Daten zwischen den Controllern (3)

Sie können angulare Dienste verwenden, um Daten zwischen Ihren Controllern auszutauschen. Sie sollten zuerst einen Dienst erstellen, um Informationen von Ihrem Server zu erhalten

var app = angular.module('app', ['ngRoute']);
app.service('dataService', function($http) {
  var data = {};
    data.list = [];
  var getData = function(){
    $http.get("model/data.json").then(function (response) {
      data.list = response.data;
    },function(err){});

  }
    return {
        getDataFromServer:getData,
        getData:data,

    }
});

Jetzt können Sie diesen Service in Ihrem Controller verwenden:

app.controller("mainCtrl", function ($scope, dataService) {
       dataService.getDataFromServer();      

});

app.controller("addCtrl", function ($scope, dataService) {
    $scope.data = dataService.getData;
    $scope.data.list.push({
        name:"foo",
        shop:"bar"
    });
});

Und hier ist Jsfiddle-Code: https://jsfiddle.net/xqn5yu8g/

Weitere Informationen zu eckigen Diensten finden Sie auf der Dokumentseite angularjs services

Ich habe eckig und mit einem Problem konfrontiert: Ich habe eine SPA, die zwei Teile mit Controllern enthält, die Daten von JSON-Datei zurück. Der erste Conroller zum Anzeigen des Menüs, der zweite zum Hinzufügen eines neuen Elements. Für jetzt in JSON-Datei gibt es zwei Objekte, aber wenn ich ein drittes Element in den zweiten Controller hinzugefügt habe, verschwand es, wenn ich auf der ersten Seite zurückkomme. Wie kann ich es reparieren? Ich habe gelesen, dass Fabrik die Daten zwischen den Controllern übertragen kann, aber ich habe es nie verwendet.

Eckiges Modul:

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

myApp.config(function ($routeProvider){
    $routeProvider.when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainCtrl'
    })
    .when('/add', {
        templateUrl: 'pages/add.html',
        controller: 'addCtrl'
    })
})



myApp.controller("mainCtrl", function ($scope, $http) {
            $http.get("model/data.json").success(function (response) {
                $scope.list = response;
            })                  

    });

myApp.controller("addCtrl", function ($scope, $http) {

            $scope.addAdv = function(newAdv){
                $http.get("model/data.json").success(function (response) {
                    response.push({
                        name: newAdv.name,
                        shop: newAdv.shop 
                    });
            })
        }; 
    });

JSON-Datei:

[{
    "name": "New Item",
    "shop": "Titan"
},
{
    "name": "New Item1",
    "shop": "Titan"
}]

Wie Daniel.v sagte, ist ein Service der beste Weg. Es gibt auch zwei weniger elegante Alternativen:

  • "Wenn die Daten zwei Controllern gehören, sollten diese ein Elternteil von $ teilen und es sollte der Eigentümer der Daten sein!"
  • "Hey, warum benutzen wir keine Events und Hörer? Lass uns für $ Broadcast und $ Emit gehen!"

Aber ich bevorzuge hauptsächlich Dienstleistungen.


Das wird für Sie funktionieren:

`

<div ng-app="myApp" ng-controller="myCtrl"> 

    <button ng-click="sendData();"></button>

</div>


<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        function sendData($scope) {
            var arrayData = [1,2,3];
            $scope.$emit('someEvent', arrayData);
        }

    });
    app.controller('yourCtrl', function($scope, $http) {
        $scope.$on('someEvent', function(event, data) {
            console.log(data); 
        }); 
    });
</script>

`







angularjs-scope